Divs in line - 與底部對齊

我在表單中存在div定位問題。我的頁面包含一張表。使用div佈局如下。Divs in line - 與底部對齊

在左側的div中，有對這些字段的描述。（他們共享相同的風格類）在右側的divs中，有字段。（它們共享相同的樣式類）

驗證後，我的網頁看起來是這樣的：

但我希望它看起來像這樣：

老實說，我認爲應該怎麼處理它，因爲它非常白，而且我simlpy不知道該怎麼做。我的網頁已經準備就緒，所以我想盡可能以低成本解決問題。

[EDIT1]：我現在的CSS看起來很簡單，像這樣：

div_on_left{ 
    clear: both; 
    float: left; 
    width: 440px; 
    padding-top: 5px; 
    padding-bottom: 8px; 
} 
div_on_right{ 
    float: left; 
    width: 500px; 
    padding-top: 3px; 
    padding-bottom: 6px; 
}

[EDIT2]：我剛找到一個解決方案（貼在下面），但我不喜歡它。如果左邊div的上下文太大，它會崩潰。這是由於

position：absolute;

所以我想避免這個屬性。

<html> 
<head> 
<style type="text/css"> 
.row 
{ 
position:relative; 
} 
.left 
{ 
font-size:100%; 
position:absolute; 
left:0px; 
bottom:0px; 
} 
.right 
{ 
font-size:200%; 
position:relative; 
left:150px; 
bottom:0px; 
} 
</style> 
</head> 
<body> 
<div class="row"> 
<div class="left">Left_1</div> 
<div class="right">Right_1</div> 
</div> 

<div class="row"> 
<div class="left">Left_2</div> 
<div class="right">Right_2</div> 
</div> 

<div class="row"> 
<div class="left">Left_3</div> 
<div class="right">Right_3</div> 
</div> 
</html>

它必須是一個常見問題。你如何處理寬度表單，並通過驗證來驗證字段框？

來源

2012-05-31 M314

和當前的CSS是..？ – Daedalus

我剛剛在主帖中加入。 – M314

有問題的解決方案，但它涉及table-cell佈局。佈局必須有一排和兩個內部單元格對齊底部。下面是一個例子的jsfiddle：http://jsfiddle.net/cvbLC/

我不知道哪個瀏覽器支持您所需要的，但這裏是對這個問題的詳細信息：http://www.quirksmode.org/css/display.html

來源

2012-12-20 23:51:02 ignacioricci

Divs in line - 與底部對齊

回答

相關問題