正确对齐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元素

回答

相关问题