问题描述
|
我已经对此进行了一个小时的修改,无法完全正常工作。
基本上,我有两个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>
解决方法
试试这个(我删除了圆角):
<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
,一种简单的解决方案是将其放入具有一行和两个单元格的表中。像元会自动获得相同的高度,您可以使DIV跨越整个像元。