<分区>
html - CSS float 空格
我有多个 div，它们有不同的高度。我想向左漂浮。 2 个 Div 可以排成一行。但是由于每个 div 都有不同的高度，所以下一行留下了很多奇怪的空间。我可以删除空格并将 div 向上移动吗？
请看图片:
代码如下:
<div class="wrap">
<div class="box1">Box1 with less height.</div>
<div class="box2">Box2 with more height.</div>
<div class="box3">Box3 with whatever height.</div>
</div>
CSS:
.wrap{
width:410px;
border:1px solid red;
overflow:hidden;
}
.box1{
width:200px;
height:50px;
float:left;
border:1px solid green;
}
.box2{
width:200px;
height:150px;
float:left;
border:1px solid blue;
}
.box3{
width:200px;
height:250px;
float:left;
border:1px solid blue;
}
JSFiddle: http://jsfiddle.net/NsH5M/
附言。 div 高度不固定。这只是举例。 编辑:抱歉，我应该提到无法编辑标记。
最佳答案
尝试使用masonry .这应该可以帮助您安排没有空白空间的 div。
您的代码示例就是这样使用的:jsfiddle (11/2018 更新)
HTML:
<div class="wrap">
<div class="box box1">Box1 with less height.</div>
<div class="box box2">Box2 with more height.</div>
<div class="box box3">Box3 with whatever height.</div>
</div>
JavaScript:
$(function(){
$('.wrap').masonry({
// options
itemSelector : '.box'
});
});
和 CSS:
.wrap{
width:410px;
border:1px solid red;
overflow:hidden;
}
.box{
float: left;
width: 200px;
}
.box1{
height:50px;
border:1px solid green;
}
.box2{
height:150px;
border:1px solid blue;
}
.box3{
height:250px;
border:1px solid blue;
}
关于html - CSS float 空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32424794/