0

すべての流体を白い四角で塗りつぶしたいと思います。
写真を見ると、それぞれの流体は白で塗りつぶされていますが、完全な正方形ではありません。
div class で全体をラップしWhiteZoneましたが、正方形にはなりません。
どうすれば正方形にできますか？

ライブデモ

これは正方形ではありません！

HTML

<div class="WhiteZone">
    <div class="Box">
        <div class="Left">
            abcdefg<br />
            opqrstu
        </div>
    </div>
    <div class="Box">
        <div class="Right">
            hijklmn
        </div>
    </div>
</div>

CSS

div.WhiteZone{
    color: #000;
    background-color: #fff;
}

div.Box{
    padding: 0px;
    text-align: center;
    float: left;
}

div.Left{
    width: 300px;
    padding-top: 5px;
    padding-bottom: 15px;
    text-align: center;
    color: #000;
    background-color: #fff;
    clear: both;
}

div.Right{
    width: 300px;
    padding-top: 5px;
    text-align: left;
    color: #000;
    background-color: #fff;
    clear: both;
}
4

2 に答える 2

1

これに使えますdisplay: table。次のように書きます。

div.WhiteZone {
    color: #000;
    background-color: #fff;
    display: table;
}

div.Box {
    padding: 0px;
    text-align: center;
    display: table-cell;
}

このデモを確認してください。

于 2013-01-15T16:14:46.543 に答える
1 
div.WhiteZone{
    color:#000000;
    background-color:#ffffff;
    overflow:hidden;
}

overflow:hidden を whitezone クラスに追加して、内側のフローティング div の高さに合わせて引き伸ばすことができます。しかし、それだけを追加すると、ページの全幅を占める白い背景が得られます。ここのように

それを避けるためにfloat:left、ホワイトゾーンクラスに追加するか（ここのように）、それに a を設定することもできます（ここwidthのように）

于 2013-01-15T16:18:26.620 に答える