[英]Properly aligning div elements
我已經對此進行了一個小時的修改,無法完全正常工作。
基本上,我有兩個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跨越整個像元。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.