CSS浮动空格

Question

我在包裹中有多个div,它们有不同的高度.我想左转.2个分区可以连续排列.但由于每个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/

PS.div高度不固定.这仅仅是例如. 编辑:对不起,我应该提到它无法编辑标记.

Answer 1

尝试使用砖石.这应该可以帮助您安排div没有空的空间.

这就是它用作代码示例的方式:jsfiddle(Updated 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;
}