帶邊框的CSS浮動

我有一個div，我想要一個邊框和背景顏色，但容器已摺疊，因爲一切都浮動。帶邊框的CSS浮動

這可以在http://jsfiddle.net/5DNFs/

待見我如何獲得<div class="due-total">有邊框和背景色？

來源

2012-10-25 JonoB

這是正常的嗎？我沒有看到HTML和CSS在你的小提琴？ – Marc

你不能只用一張桌子嗎？看起來像表格數據給我。 –

清除您的花車：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>

來源

2012-10-25 12:44:17

'overflow：hidden'是另一種清除方式，無需額外標記。 http://jsfiddle.net/5DNFs/10/ –

更好的使用'clear：both;'清除浮動 –

[Really]（http://stackoverflow.com/a/1633170/423235）？ –

這...

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

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

來源

2012-10-25 12:44:08 udidu

您可以添加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-25 12:44:27 Dev

嘗試增加溢出到每個浮動容器：

overflow: auto

這解決了崩潰問題。它看起來像我的樣式也是錯誤的與浮游物。清除花車也會有所幫助。

來源

2012-10-25 12:45:54 CodePB

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

但是看起來你應該使用這個數據表。

來源

2012-10-25 12:52:37

帶邊框的CSS浮動

回答

相關問題