5

我在一个包装中有多个 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 高度不固定。这只是一个例子。 编辑：对不起，我应该提到它无法编辑标记。

在此处输入图像描述

4

7 回答 7

7

尝试使用砖石。这应该可以帮助您安排没有空白空间的 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;
}
于 2012-06-21T10:41:44.480 回答
3

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

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

您的 jsfiddle 已在此处更新

于 2012-06-21T10:39:30.300 回答
2

像float:right这样.box2写：

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

检查这个http://jsfiddle.net/NsH5M/2/

于 2012-06-21T10:38:00.043 回答
1

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

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

于 2012-06-21T10:37:07.253 回答
1

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

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

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

于 2012-06-21T10:38:15.783 回答
0

同位素可以为您做到这一点，使用砖石布局。

于 2012-06-21T11:01:23.653 回答
0

正确的解决方案......关键问题是“你只有 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();
            }
    });
}
于 2015-09-07T00:08:21.327 回答