Question

我有一个div，我想要一个边框和背景颜色，但容器已经崩溃，因为一切都浮动。

查看

如何让<div class="due-total">拥有边框和背景颜色？

Answer 1

清除你的花车：My Fiddle

注意：只需更改边框颜色以便您可以看到，您可以将其更改为您想要的任何颜色

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>

Answer 2

这是......

只需将display:inline-block添加到您的div

即可

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

Answer 3

您可以添加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/

Answer 4

尝试为每个浮动容器添加溢出：

overflow: auto

这解决了崩溃问题。它看起来像你的样式也是错误的浮动。清理花车也会有所帮助。

Answer 5

您需要强制new formatting context或use a non-floating element to clear the floats (AKA. clearfix) 。

但看起来你应该使用表来获取这些数据。

带边框的CSS浮动

5 个答案: