浮动DIV垂直空间

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

目前，您没有为.boxdiv 设置明确的高度，因此它们的高度当前取决于其中的内容。如果您不希望它们之间有任何空间，则必须为.box设置相同的height或相同的min-height

Answer 2

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

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

单击此处查看我对您的更改，现在很好

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

min-height: 100px;
max-height: 200px;
overflow: hidden;

jQuery解决方案：点击下面的链接，获取关于CSS技巧的精心编写的教程

行中等高块

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