Question

我正在搞乱一个网站的新布局，我已经将表单设置打包在一起，但我正在试验我可以制作这种新布局的流畅程度。我已经接近但没有雪茄，因为物品浮动到位，但正如你在下面的例子中看到的那样右边的物品比之前的物品大400px，下一个物品不会立即漂浮在下面较短的盒子，它将漂浮在左侧较长盒子的终点，所以你有这个大的空白区域，只是破坏了布局的外观。

这是小提琴：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/

Answer 2

给浮动：右边的大框

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

流体divs填充剩余的垂直空间

2 个答案: