div上的'border-bottom'出現在頂部？ Div不包裹文本？

我創建了一個像divs中的數據視圖一樣的表格。由於我使用的企業框架，我不得不使用大量內聯HTML和CSS。div上的'border-bottom'出現在頂部？ Div不包裹文本？

可視化的方式：每行都有一個容器div（rowContainer），並且每行都包含在一個div（collResult）中。我想讓border-bottom元素出現在容器div的底部。在IE中，這種方式工作的很好，但在Firefox中，邊界不會環繞行，而是與行結果完全不同步。

這裏是我的代碼示例：

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
</div></div>

感謝所有幫助

來源

2010-11-02 Derek Paring

順便說一句，單引號是必要的，因爲我正在JavaScript中編寫此內容。 – 2010-11-02 09:48:23

這是因爲你是浮動內的div，漂浮在外層div還來解決這個問題。

浮動元素時，父元素不會展開到其子級的高度，除非它正在浮動其自身，或者存在另一個非浮動子級。如果你不能浮動父項，另一個解決方案是在當前沒有浮動並清除其他元素的子項之後添加一個元素。例如在內部div後添加這個

<div style="clear:both"></div>

來源

2010-11-02 09:50:11 3urdoch

您需要清除浮動，所以包含div將展開爲行的大小。

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
<div class='collClear' style='clear:left;'></div> 
</div></div>

來源

2010-11-02 09:52:13 theorise

刪除的冗餘DIV的需要，

補充一點：

overflow:auto;

到

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>

來源

2010-11-02 09:54:50 Ross

爲什麼，如果你想顯示錶格使用的DIV數據？

表只是爲了這個！以表格形式表示數據...不要將它用於佈局，但使用DIV模擬錶行爲，恕我直言，沒有意義

來源

2010-11-02 09:58:37 MatuDuke

我知道，但我的老闆不喜歡桌子。相信我我知道這個:) – 2010-11-02 09:59:15

如果你不喜歡錶格數據，你的老闆是錯誤的。用於佈局的表格很好，但表格用於數據。 – 2010-11-02 10:03:21

以表格格式獲取內容的方式是在內部使用span而不是div rowcontainer div和設置顯示爲內聯塊如下

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>    
     <span class='collResult' style='width: 20%;display: inline-block;font: normal 12px Arial;'> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
</div>

來源

2010-11-02 10:19:53

div上的'border-bottom'出現在頂部？ Div不包裹文本？

回答

相關問題