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-block到您的 div

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

于 2012-10-25T12:44:08.207 回答
1

您可以将 div 添加为到期总数的子项，示例如下：

.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 回答