0

境界線と背景色が必要な div がありますが、すべてが浮かんでいるため、コンテナーが折りたたまれています。

これはhttp://jsfiddle.net/5DNFs/で見ることができます

<div class="due-total">に境界線と背景色を持たせるにはどうすればよいですか?

4

5 に答える 5

3

フロートをクリアする :マイ フィドル

注：境界線の色を変更して見やすくしただけで、好きな色に変更できます

HTML

<div class="invoice-totals">   
    <div class="total">
        <div class="label">TOTAL</div>
        <div class="value">133.00</div>
    </div>

    <div class="paid-total">
        <div class="label">Payments</div>
        <div class="value">0.00</div>
         <div style="clear: both;"></div>
    </div>

    <div class="due-total">
        <div class="label">AMOUNT DUE</div>
        <div class="value">133.00</div>
         <div style="clear: both;"></div>
    </div>
</div>
于 2012-10-25T12:44:17.150 に答える
2

ここにあります...

display:inline-blockdivに追加するだけです

http://jsfiddle.net/5DNFs/5/

于 2012-10-25T12:44:08.207 に答える
1

div を due-total の子として追加できます。例を次に示します。

.invoice-totals .due-total > div {
    border: 1px solid #DDD;
    background-color: #CCC;
    padding: 5px;   
}​

別：

.invoice-totals .due-total {
    float: left;
    border: 1px solid #DDD;
    background-color: #CCC;
    padding: 5px;   
}​

http://jsfiddle.net/5DNFs/3/

http://jsfiddle.net/5DNFs/9/

于 2012-10-25T12:44:27.830 に答える
0

フロートされた各コンテナーにオーバーフローを追加してみてください。

overflow: auto

これにより、崩壊の問題が解決されます。フロートでもスタイリングが間違っているように見えます。フロートをクリアすることも役立ちます。

于 2012-10-25T12:45:54.827 に答える
0

新しい書式設定コンテキストを強制するか、非浮動要素を使用してフロートをクリアする必要があります (AKA. clearfix)。

とにかく、このデータにはテーブルを使用する必要があるようです。

于 2012-10-25T12:52:37.617 に答える