Masonry/Isotope/Freetile 和其他在网格/容器中的绝对定位元素方面做得很好。
然而,当一个元素占据网格/容器的整个宽度时,它会产生巨大的间隙,这是不可接受的结果。
这是我的问题的 jsfiddle:http: //jsfiddle.net/QNf3A/1/
红色 div 的顶部有足够的空间放置绿色 div。然而,不同的图书馆倾向于尊重流程,而不是“不留空隙”的理念。
有谁知道替代 js 库或类似的技巧来避免空白?
-
来自jsfiddle的代码...
HTML:
<div id="container">
<div class="block half"></div>
<div class="block full"></div>
<div class="block half"></div>
<div class="block half"></div>
<div class="block half"></div>
</div>
CSS:
#container{
width: 600px;
background-color: #EEE;
}
.block{
float: left;
}
.half{
width: 300px;
height: 100px;
background-color: #CFC;
}
.full{
width: 600px;
height: 100px;
background-color: #FCC;
}
JS/jQuery:
$(function($) {
$('#container').masonry({
itemSelector: '.block',
columnWidth: 300
});
});