我正在尝试制作具有不同高度和宽度的响应式框。问题是(正如您在图像中看到的那样)是它们不会进入间隙并填充剩余的空间。任何人都知道是什么原因造成的,什么可以解决这个问题?
<section class="blokContentContainer">
<div class="blok-25">
</div>
<div class="blok-25">
</div>
<div class="blok-50">
</div>
<div class="blok-50">
</div>
<div class="blok-25">
</div>
<div class="blok-25">
</div>
</section>
.blokContentContainer div{
float: left;
display: inline-block;
border: 2px solid white;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
background-color: #B2DFDB;
}
.blok-25{
width: 25%;
height: 300px;
}
.blok-50{
width: 50%;
height: 500px;
}
.blokContentContainer{
height: 100%;
width:98%;
margin-left:1%;
}
最佳答案
如果您可以使用固定宽度/高度(即不是百分比),那么 CSS3 列可以帮助您。
诀窍是结合使用列
和适当的float
清除。 clear:left
较大的 div
以便较小的可以并排放置,但较大的会分开。这是一个例子:
演示 fiddle :http://jsfiddle.net/v8sjnfre/2/
演示片段:
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
.blokContentContainer {
width: 400px; margin: 12px;
-webkit-column-count: 2; column-count: 2;
-webkit-column-gap: 0px; column-gap: 0px;
}
.blokContentContainer div {
display: block;
background-color: #B2DFDB;
border: 1px solid #fff;
-webkit-column-break-inside: avoid;
}
.blok-25 { width: 100px; height: 100px; float: left; }
.blok-50 { width: 200px; height: 200px; clear: left; }
<section class="blokContentContainer">
<div class="blok-25"></div>
<div class="blok-25"></div>
<div class="blok-50"></div>
<div class="blok-50"></div>
<div class="blok-25"></div>
<div class="blok-25"></div>
</section>
浏览器对列的支持非常好 (IE>9),并结合了 vendor 前缀。看这里 - http://caniuse.com/#feat=multicolumn
关于javascript - CSS div 适合间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33170331/