正确对齐div元素

时间:2011-04-14 16:32:01

标签: html css

我现在一直在修补这个问题一小时,并且无法让它发挥作用。

基本上我有两个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>

2 个答案:

答案 0 :(得分:3)

试试这个(我删除了圆角):

<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

答案 1 :(得分:1)

简单的解决方案是将其放入一个包含一行和两个单元格的表中。单元格自动获得相同的高度,您可以使DIV跨越整个单元格。