3

サイトの新しいレイアウトをいじっていて、フォームのセットアップをまとめましたが、この新しいレイアウトをどのように滑らかにできるかを実験しています. アイテムが所定の位置に浮かんでいるため、葉巻はありませんが、次のアイテムはすぐに下に浮かびません。短いボックスは、左側の長いボックスの終点に浮くため、レイアウトの外観を台無しにするこの大きな空白があります。

これがフィドルです：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

-1

Give 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 に答える