下邊界不會到底？

由於某種原因，底部邊框不會顯示在底部？邊界線出現在內容的頂部，這是什麼原因？下邊界不會到底？

我的css好嗎？

HTML

<div class="rowOrder"> 
    <div class="orderid"> 
     <span>07/04/2011</span> 
     OrderID 1234 
    </div> 
    <div class="company"> 
     My Company 
    </div> 
</div>

CSS

.rowOrder { 
    padding:3px; 
    border-bottom: solid 1px #B4CE51; 
    display:block; 
} 
.rowOrder .orderid { float:left; margin-right:30px; } 
.rowOrder .orderid span { 
    display:block; 
} 

.rowOrder .company { 
    float:left; 
    font-weight:bold; 
}

來源

2011-05-07 user622378

一個古怪的，用的DIV溢出：隱藏做成長爲包含其浮動元素。這確實是一個黑客，但它可以跨瀏覽器。由於包含的DIV沒有給出任何明確的大小，所以overflow：hidden沒有其他作用。

來源

2011-05-07 15:31:48 jpsimons

謝謝，通過添加溢出修復了問題：隱藏在。rowOrder css。底部邊框是預期的全寬，但爲什麼float：left;不這樣做？ – user622378 2011-05-07 15:49:46

一旦你漂浮它留下的一般流程的項目，是指包含div不會充當一個包含分區，用於例如，包含div的邊框。解決方案，在年底rowOrder風格=「明確：既」添加另一個專區（或試圖給這最後的內部DIV
你不需要給你的div display: block
不要給你跨度display: block只是用DIV
看樣子你嘗試代表表格數據。語義在這種情況下是使用<table>標籤。

來源

2011-05-07 14:45:32

+1有關「看起來你嘗試表示表格數據的好評」，這種情況下的語義是使用'

'標籤。無表不會停止在你的餘生中使用表格。 – 2011-05-07 15:04:30

你可以嘗試在要素指着螢火蟲突出其中的div自己定位（或在其上放置背景色）。

也許這是一個浮動問題（嘗試浮動.rowOrder離開？）

來源

2011-05-07 14:47:40 Kaido

謝謝，關於跨度刪除的意見 – Kaido 2011-05-07 14:53:45

浮動元素搞砸了HTML流，所以你必須考慮到這一點。這就是這裏發生的事情。

您可以通過使用Firebug（FF擴展）例如，並檢查rowOrder div來輕鬆地看到這一點。你應該看到它沒有完整的應有的高度。您的訂單ID和公司div有一定的高度，但包含的div（例如rowOrder）的高度更低。這是浮標未被清除的典型指標。 rowOrder div至少應該包含所有內容的高度。

Itay的答案解決了這個問題。

來源

2011-05-07 14:48:05 Vodde

浮動元素在父高度計算上不匹配。而浮動屬性不應該用於簡單的元素對齊。爲此，我們有 align屬性或父元素的text-align屬性。

試試這個：

，你可以用你的優勢

.rowOrder { 
    padding:3px; 
    border-bottom: solid 1px #B4CE51; 
    display:block; 
    text-align:left; 
} 
.rowOrder { 
    margin-right:30px; 
} 
.orderid, .company{ 
    display:inline-block; 
    vertical-align:top; 
} 
.rowOrder .company { 
    font-weight:bold; 
}

來源

2011-05-07 14:55:03 cvsguimaraes

相關問題

下邊界不會到底？

回答

相關問題