如何使Div填充剩余空間？
[英]How to Make Div fill the remaining space?
問題描述
我正在制作網格布局，但我希望div填充所有空白，而不僅僅是並排。 我已經盡我所能嘗試了一切，但我只是想不通。 有什么我想念的嗎？
這是JSFiddle中的代碼： https ://jsfiddle.net/y3s6b8dm/2/
如果看的話，右邊的.sml應該是4個正方形，但是只放2個，然后轉到下一行。 這樣會弄亂整個網格。
混合時的外觀：
body { width: 1200px; padding: 0; margin: 0; } .sml { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 200px; height: 200px; vertical-align: top; position: relative; display: inline-block; box-sizing: border-box; } .med { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 300px; height: 300px; position: relative; display: inline-block; box-sizing: border-box; } .big { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 400px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } .feat { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 1200px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } height: 200px; position: relative; display: inline-block; box-sizing: border-box; } .med { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 300px; height: 300px; position: relative; display: inline-block; box-sizing: border-box; } .big { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 400px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } .feat { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 1200px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; }
<body><div class="feat"></div><div class="big"></div><div class="big"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div>
1 個解決方案
解決方案1
1 2017-04-10 19:35:58
如果您比較提供的圖像中描繪的圖案，請對照代碼，尺寸不匹配。 比率為：
圖片
-
.sml1x1 -
.med2x2 -
.big3x3
的CSS
-
.sml1x1 -
.med1.5x1.5 -
.big2x2
我假設您想要圖像中的內容，因此我根據圖像中顯示的比例更改了尺寸。 我還將所有內容縮小到20％（乘以原始大小的5），以方便查看Snippet。
額外的伸縮容器*被包裹在正方形周圍：
-
section.col1 -
section.col2 -
section.col3 -
section.sub2
身體也display:flex 。 盡管將來我會建議不要以有限的方式使用身體。 不必給主體固定寬度，而是將所有內容包裝在另一個元素中。 您應該考慮的另一件事是不要使用固定的尺寸進行布局。 嘗試相對單位em和/或百分比，以及一些固有類型，例如vw和vh 。 px與em的默認瀏覽器比率是16：1（每16px = 1em ）。 在代碼段中，您可以通過將px轉換為em來使整個響應成為響應。
.sml {width:2.5em; height:2.5em;....
並用另一個元素替換主體。
main {width:15em....
SNIPPET
* { padding: 0; margin: 0; border: 0; box-sizing: border-box; } body { width: 240px; height: 200px; display: flex; flex-wrap: wrap; } .col1 { width: 80px; height: 200px; display: flex; flex-wrap: wrap; } .col2 { width: 120px; height: 200px; display: flex; flex-wrap: wrap; } .sub2 { display: flex; flex-direction: column; } .col3 { width: 40px; height: 200px; display: flex; flex-direction: column; } .sml { background: url("http://placehold.it/40x40/f00/fff?text=40x40")no-repeat; width: 40px; height: 40px; } .med { background: url("http://placehold.it/80x80/fc0/000?text=80x80")no-repeat; width: 80px; height: 80px; } .big { background: url("http://placehold.it/120x120/000/fc0?text=120x120")no-repeat; width: 120px; height: 120px; } .feat { background: url("http://placehold.it/240x80/00f/000?text=280x80")no-repeat; width: 280px; height: 80px; }
<body> <div class="feat"></div> <section class='col1'> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="med"></div> <div class="sml"></div> <div class="sml"></div> </section> <section class='col2'> <div class="big"></div> <section class='sub2'> <div class="sml"></div> <div class="sml"></div> </section> <div class="med"></div> </section> <section class='col3'> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> </section> </body>
*彈性容器：指具有屬性display:flex的元素的術語，該元素影響其所有子元素（稱為彈性項目）以遵守彈性框布局規則。
如何讓 div 填充剩余的水平空間？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.