CSS浮动空格[重复]答案

【问题标题】：CSS float empty spaces [duplicate]CSS浮动空格[重复]
【发布时间】：2012-06-23 13:51:06
【问题描述】：

我在一个包裹中有多个 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/

PS。 div 高度不固定。这只是一个例子。 编辑：对不起，我应该提到它无法编辑标记。

【问题讨论】：

单独使用 css 和 html 是不可能的。你愿意使用像masonry这样的jQuery插件吗？

标签： html css

【解决方案1】：

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

这就是它用作代码示例的方式：jsfiddle（2018 年 11 月更新）

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

【讨论】：

jsFiddle 看起来完全类似于 Chrome 69 中原始问题中的屏幕截图，因此此处无法正常工作。
我已经更新了你的 jsFiddle 中的包和依赖项。它现在可以工作了：jsfiddle.net/NsH5M/123

【解决方案2】：

正确的解决方案...关键问题是“您只有 2 列吗？”。既然是这种情况，正确的解决方案是：

（这是一个jQuery代码，但显然如果在纯JS中多写几句话就可以完成）

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

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

【讨论】：

【解决方案3】：

Isotope 可以为您完成这项工作，使用砖石布局。

【讨论】：

【解决方案4】：

只需将 float:right 用于您想要在右侧的元素。在这种情况下：

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

您的 jsfiddle 已更新 here

【讨论】：

如果您为网站准备可变宽度，您就不会这样做。因此，这也不是 100% 安全使用的。见 jsFiddle-Fork jsfiddle.net/g3jv9ez5

【解决方案5】：

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

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

您也可以浮动：向右您的 box3，但这会稍微改变结果（左侧浮动的框和右侧浮动的框之间会有间隙 - 根据您的设计，这可能不是问题。

【讨论】：

【解决方案6】：

给float:right给.box2这样写：

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

查看http://jsfiddle.net/NsH5M/2/

【讨论】：

【解决方案7】：

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

编辑：在 Firefox 中工作 http://jsfiddle.net/NsH5M/1/

【讨论】：