html - 流体 div 填充剩余的垂直空间

Question

我正在弄乱网站的新布局，并且已经拼凑了一个表单设置，但我正在试验如何流畅地制作这个新布局。我已经接近但没有雪茄，因为元素漂浮到位但正如您在下面的示例中看到的那样，右侧的元素比之前的元素大 400 像素，下一个元素不会立即漂浮在较短的盒子，它会漂浮在左边较长盒子的终点，所以你有这么大的空白，只会破坏布局的外观。

这是 fiddle :http://jsfiddle.net/xMzb8/

下面是供将来引用的代码:

HTML

<div class="accountBox">
    <div class="AB-innerFull">
        <p class="AB-title">Registration Form 1</p>
        <div class="AB-innerBody" style="height: 200px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 2</p>
        <div class="AB-innerBody" style="height: 400px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 3</p>
        <div class="AB-innerBody" style="height: 122px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 4</p>
        <div class="AB-innerBody" style="height: 560px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 5</p>
        <div class="AB-innerBody" style="height: 120px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 6</p>
        <div class="AB-innerBody" style="height: 50px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 7</p>
        <div class="AB-innerBody" style="height: 230px;"></div>
    </div>
</div>

CSS

* {
    color: RGB(0, 0, 0);
    font-family: Calibri;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    padding: 5px;
}

.accountBox {
    background: RGBA(200, 230, 240, 0.6);
    border: 1px solid RGB(20, 100, 150);
    float: left;
    margin: 10px 29px;
    padding: 5px;
    width: 870px;
}

.AB-innerHalf, .AB-innerFull {
    background: RGB(255, 255, 255);
    border: 1px solid RGB(200, 200, 200);
    box-shadow: 0px 0px 2px RGB(220, 220, 220);
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    float: left;
    margin: 5px;
    padding: 40px 20px 20px;
    position: relative;
}

.AB-innerHalf {
    width: 425px;
}

.AB-innerFull {
    clear: left;
    width: 860px;
}

.AB-innerBody {
    background: RGB(255, 0, 0);
    clear: left;
    float: left;
    width: 100%;
}

.AB-title {
    border-bottom: 2px dotted RGB(20, 100, 150);
    color: RGB(20, 100, 150);
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    left: 0;
    line-height: 25px;
    margin: 5px 10px;
    padding: 0 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
}

Answer 1

可能是，
这可以解决您的问题...!？

http://isotope.metafizzy.co/