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

enter image description here

Answer 1

尝试使用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;
}

Answer 2

将float:right提交给.box2这样写：

.box2{
    width:200px;
    height:150px;
    float:right;
    border:1px solid blue;
}

选中此http://jsfiddle.net/NsH5M/2/

Answer 3

只需使用float：right即可获得右侧所需的元素。在这种情况下：

.box2{
width:200px;
height:150px;
float:right;
border:1px solid blue;
}

您的jsfiddle已更新here

Answer 4

我不确定它是否可行，但您可以尝试将框1和框3浮动到左侧，将框2浮动到右侧

编辑：适用于firefox http://jsfiddle.net/NsH5M/1/

Answer 5

如果你可以编辑你的标记，你可以将box1和box3包装在一个浮动的容器中：

http://jsfiddle.net/NsH5M/3/

你也可以浮动：右边你的方框3，但这会略微改变结果（在左边浮动的框和右边的框之间会有一个间隙 - 根据你的设计，这可能不是问题。< / p>

Answer 6

Isotope可以使用砌体布局为您完成此操作。

Answer 7

正确的解决方案......关键问题是＆＃34;你只有2列？＆＃34;。而且既然如此，那么正确的解决方案就是：

（这是一个jQuery代码，但显然可以在纯JS中添加更少的单词）

我的案例类＆＃34; add-info＆＃34;已分配给容器中的所有元素。你正在做的只是检查下一个元素是否应该向左或向右浮动。不要为所有事情使用复杂的脚本。有一半人通过手机访问网络，移动数据量有限。

function contactFloats() {
    var leftCounter = 0;
    var rightCounter = 0;
    $('.add-info').each(function(){
            if(leftCounter <= rightCounter){
                $(this).css('float', 'left');
                leftCounter += $(this).outerHeight();
            }else{
                $(this).css('float', 'right');
                rightCounter += $(this).outerHeight();
            }
    });
}

CSS浮动空格

7 个答案: