คำถามติดแท็ก fluid-layout

5
ระบบกริดแบบฟลูอิดหรือแบบคงที่ในการออกแบบที่ตอบสนองตาม Bootstrap ของ Twitter
ฉันสับสนเกี่ยวกับตัวเลือกต่าง ๆ ในตาราง bootstrap twitterและวิธีที่พวกเขาไปด้วยกัน จะเริ่มต้นด้วยคุณสามารถมีสามัญคงที่หรือcontainercontainer-fluid จากนั้นคนใดคนหนึ่งสามารถรวมทั้งสามัญหรือแถวของเหลวrow row-fluidนั่นคือคุณสามารถมีภาชนะคงที่ที่มีแถวของไหลหรือภาชนะของของไหล ... กับแถวคงที่หรือไม่? จากนั้นคุณสามารถรวมข้อความค้นหาสื่อ 'ตอบสนอง' หรือไม่ก็ได้ ฉันสับสนว่าสิ่งเหล่านี้มีปฏิกิริยาต่อกันอย่างไร แต่ขอเริ่มด้วยตัวอย่างที่ชัดเจน ในหน้าตัวอย่างนั้นมีสิ่งที่แสดงเป็นตัวอย่างของทั้งกริดคงที่และกริดฟลูอิด อย่างไรก็ตามในเบราว์เซอร์ของฉันในหน้าตัวอย่างนั้น - กริดทั้งสองทำงานเหมือนกัน อาจเป็นเพราะหน้าตัวอย่างใช้คิวรีสื่อที่ตอบสนองต่อการเลือกหรือไม่ ในตัวอย่างกริดทั้งสองถ้าฉันเริ่มค่อยๆลดขนาดหน้าต่างเบราว์เซอร์ของฉันองค์ประกอบกริดจะไม่แคบลงเรื่อย ๆ เมื่อถึงความกว้างของขอบเขตที่แน่นอน (ตอบสนอง) พวกมันจะมีขนาดเล็กลง แต่ทั้งสองตัวอย่าง 'คงที่' ธรรมดาและตัวอย่าง 'ของเหลว' ทำตัวเหมือนกันตรงนี้ - แล้วห่าอะไรคือความแตกต่าง?

15
วิธีสร้างความกว้างขององค์ประกอบ: 100% ลบด้วยการเติมเต็ม?
ฉันมีอินพุต html อินพุตมีpadding: 5px 10px;ฉันต้องการให้เป็น 100% ของความกว้าง div ของผู้ปกครอง (ซึ่งเป็นของเหลว) อย่างไรก็ตามการใช้width: 100%;ทำให้อินพุตเป็น100% + 20pxฉันจะหลีกเลี่ยงสิ่งนี้ได้อย่างไร ตัวอย่าง
396 html  css  width  fluid-layout 

7
ความกว้างของของไหลที่มี DIV เว้นระยะเท่ากัน
ฉันมีภาชนะบรรจุความกว้างของของเหลว DIV ภายในนี้ฉันมี 4 DIVs ทั้งหมด 300px x 250px ... <div id="container"> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> <div class="box4"> </div> </div> สิ่งที่ฉันต้องการจะเกิดขึ้นก็คือกล่องที่ 1 ที่จะลอยไปทางซ้ายกล่องที่ 4 จะลอยไปทางขวาและช่องที่ 2 และ 3 ที่จะเว้นระยะระหว่างพวกเขาอย่างเท่าเทียมกัน ฉันต้องการให้การเว้นวรรคนั้นราบรื่นเช่นกันดังนั้นเบราว์เซอร์ก็ยิ่งเล็กลงพื้นที่ก็เล็กลงเช่นกัน
329 html  css  fluid-layout 

7
สอง divs เคียงข้าง - จอแสดงผลของไหล
ฉันพยายามวางสอง divs เคียงข้างกันและใช้ CSS ต่อไปนี้เพื่อมัน #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } HTML นั้นง่าย div สองตัวทางซ้ายและขวาใน div wrapper <div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> ฉันได้ลองหลายครั้งเพื่อค้นหาวิธีที่ดีกว่าใน StackOverflow และเว็บไซต์อื่น ๆ ด้วย แต่ไม่พบความช่วยเหลือที่แน่นอน ดังนั้นรหัสทำงานได้อย่างรวดเร็วในครั้งแรก ปัญหาคือสิ่งนี้ div ด้านซ้ายได้รับการเติมเต็ม / ระยะขอบโดยอัตโนมัติเมื่อฉันเพิ่มความกว้างเป็น (%) ดังนั้นที่ความกว้าง …
222 css  html  fluid-layout  fluid 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.