3

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

这是小提琴：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;
}
4

2 回答 2

2

也许，
这可以解决你的问题......！？

http://isotope.metafizzy.co/

于 2013-09-19T12:00:58.367 回答
-1

给 flot: 权到更大的盒子

  <div class="AB-innerHalf" style="float:right">
    <p class="AB-title">Registration Form 4</p>
    <div class="AB-innerBody" style="height: 560px;"></div>
</div>
于 2013-09-19T12:04:35.630 回答