Question

我想问一下如何做DIV左浮，但填充上面DIV的垂直空间。我在这里找到了使用Masonry JQuery插件的解决方案，但我想问一下是否可以通过css完成它。如果你看下面的代码或jsfiddle，我需要将BOX5垂直对齐到BOX2，这样就没有空间了。谢谢

请参阅jsfiddle：http://jsfiddle.net/9ahxjzm8/

HTML：

<div class="wrapper">
    <div class="box">
        BOX1
        fgwertgege
        erhehethrtjh
        sthsrtjhrt
        rthrthrt
        ehertuyrtyr
    </div>
    <div class="box">
        BOX2
        sadgergwerwert
        adrfgaeghr
    </div>
    <div class="box">
        BOX3
        sefweflj
        gewrgheher5y
        tryjrtjhr
        rthrthrthrthrth
    </div>
    <div class="box">
        BOX4
        sgwhej rtjrtjktyt
        dfgherthrthrt rth rtst
        ert erterty
        ertye ryeryewe w ergerge r gertgerg
    </div>
    <div class="box">
        BOX5
        agwerheh
        etherthrtjhr
        ertherthrthrth
        ergergyhr
    </div>
</div>

CSS：

div.box {
    width: 500px;   
}

div.box {
    width: 30%;
    background-color:green;
    float:left;
    border: 1px solid;
    margin-left: 5px;
    word-wrap: break-word;
}

Answer 1

设置高度或最小高度就可以了。只需将下面的代码行添加到CSS（div.box）中，您就可以了。

min-height: 100px; /* Adjsut as needed */

margin: 0 0 5px 5px; /* Adjsut as needed to keep the spaces uniform */

点击here查看我对您的更改，现在很好

激进方法：如果您将以下代码行添加到CSS中，它将始终对齐，但会切断（不显示）超出最大高度给定值的任何内容

min-height: 100px;

max-height: 200px;

overflow: hidden;

jQuery解决方案：请按照以下链接获取有关CSS技巧的精心编写的教程

Equal Height Blocks in Rows

注意：如果假设的内容超出可用空间，则将其设置为固定高度将导致问题。最大的框将始终让您了解为最小高度设置的值。

Answer 2

目前，您没有为.box div设置明确的高度，因此它们的高度当前取决于内部的内容。如果您不希望他们之间有任何空格，那么您必须为height

设置相同的min-height或相同的.box

浮动DIV垂直空间

2 个答案: