[英]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>
如果您比较提供的图像中描绘的图案,请对照代码,尺寸不匹配。 比率为:
.sml
1x1 .med
2x2 .big
3x3 .sml
1x1 .med
1.5x1.5 .big
2x2 我假设您想要图像中的内容,因此我根据图像中显示的比例更改了尺寸。 我还将所有内容缩小到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
的元素的术语,该元素影响其所有子元素(称为弹性项目)以遵守弹性框布局规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.