html – CSS浮动空格

我在包裹中有多个div,它们有不同的高度.我想左转. 2个分区可以连续排列.但由于每个div都有不同的高度,所以下一行还有很多奇怪的空间.我可以移除空间并移动div吗？

请看图片：

这是代码：

Box1">Box1 with less height.Box2">Box2 with more height.Box3">Box3 with whatever height.

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高度不固定.这仅仅是例如.
编辑：对不起,我应该提到它无法编辑标记.

最佳答案

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

这就是它如何用作代码的示例：jsfiddle(Updated 11/2018)

HTML：

Box Box1">Box1 with less height.Box Box2">Box2 with more height.Box Box3">Box3 with whatever height.

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;
}

原文地址：https://www.jb51.cc/css/427564.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。