正確對齊div元素

我一直在修補這一小時，現在不能完全得到它的工作。正確對齊div元素

基本上我有兩個div元素我想對齊彼此，我希望他們是相同的高度。第二個元素的高度應該與第一個元素的高度相匹配，因爲第一個元素可以有1-3行文本。

請參閱下面的HTML和此鏈接以查看當前輸出的圖片。

http://i55.tinypic.com/2ajozgw.jpg

很抱歉的內聯CSS，服用它，一旦我得到正確的計劃。

  <div style="width:450px;margin:0px auto;"> 
       <div style="width:90%;-moz-border-radius-bottomleft:8px;-moz-border-radius-topleft:8px;border-left:2px solid #606060;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;font-size:0.9em;float:left;"> 
        CATEGORY<br /> 
        Test 
       </div> 
       <div style="width:10%;background-color:#000000;text-align:center;-moz-border-radius-bottomright:8px;-moz-border-radius-topright:8px;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;float:left;"> 
         9 
       </div>  
      </div>

來源

2011-04-14 Tom

有上，使得涉及使用CSS高度相等列，例如許多問題：HTTP：/ /stackoverflow.com/questions/2114757/css-equal-height-columns – jeroen 2011-04-14 16:35:35

這個問題之前已被問過，不是嗎？看到這個：http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-with-html-css – jlmcdonald 2011-04-14 16:35:45

試試這個（我刪除圓角）：

<div style="width:400px; position:relative"> 
    <div style="width:350px; border: solid 1px black"> 
     CATEGORY<br> 
     Test<br/> 
     Test<br/> 
     Test<br/> 
     Test<br/> 
    </div> 
    <div style="width:50px;position: absolute; top:0px; right:0px; bottom:0px; background: black;"> 
    9 
    </div>  
</div>

這是它的樣子：http://i52.tinypic.com/2zisndt.png

來源

2011-04-14 16:40:53 mabn

+1不錯，我不知道IE的兼容性是怎麼樣的（我認爲舊版本不喜歡'right'和'bottom'）。 – jeroen 2011-04-14 16:49:17

這工作很好，並在IE7和以上工作。任何想法如何我可以垂直對齊第二個元素？垂直對齊：中間似乎不工作=（ – Tom 2011-04-14 16:53:07

簡單的解決辦法是把它放到一個有一行兩格的表格中。單元格自動獲得相同的高度，並且可以使DIV跨越整個單元格。

來源

2011-04-14 16:34:47

**沒有！表格是壞的！*表格*折舊*！它們甚至不能用於顯示錶格數據。我會冷靜下來，但這不是一個錯誤的答案;） – Blender 2011-04-14 16:39:32

@Blender雖然我同意表格不應該用於佈局，但它們絕對是顯示錶格數據的正確選擇。 **表格數據表搖滾！** ;-) – jeroen 2011-04-14 16:47:46

我打算使用一張桌子，但他們不能很好地打圓角。 – Tom 2011-04-14 16:51:44

正確對齊div元素

回答

相關問題