[英]Properly aligning div elements
I've been tinkering with this for an hour now and can't quite get it to work. 我已经对此进行了一个小时的修改,无法完全正常工作。
Basically I have two div elements I want to align next to each other and I want them to be the same height. 基本上,我有两个div元素要彼此对齐,并且希望它们具有相同的高度。 The height of the second element should match the first since the first can have 1-3 lines of text.
第二个元素的高度应与第一个元素匹配,因为第一个元素可以包含1-3行文本。
See the HTML below and this link for a pic of the current output. 有关当前输出的图片,请参见下面的HTML和此链接。
http://i55.tinypic.com/2ajozgw.jpg http://i55.tinypic.com/2ajozgw.jpg
Sorry for the inline CSS, plan on taking it out once I get it right. 对不起,内联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>
Try this (i removed round corners): 试试这个(我删除了圆角):
<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>
This is how it looks like: http://i52.tinypic.com/2zisndt.png 外观如下: http : //i52.tinypic.com/2zisndt.png
The easy solution would be to put this into a table that has one row and two cells. 一种简单的解决方案是将其放入具有一行和两个单元格的表中。 The cells get automatically the same height, and you can make the DIV to span the whole cell.
像元会自动获得相同的高度,您可以使DIV跨越整个像元。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.