位置底部CSS一個div

這裏是我的html代碼：

<div style="float:left; width:100px; height:150px;">Column 1</div> 
<div style="float:left; width:100px;">Column 2</div> 
<div style="float:left; width:100px;">Column 3</div>

我想不管位置在倒數第二和第三DIV第一格的高度。無論第一個div的高度如何，但第二個和第三個div應該如下所示。

測試
測試
測試測試測試

我試過位置絕對裏面的div，但不工作。我需要使用div而不是table來實現這一點。任何幫助，將不勝感激。謝謝。

來源

2014-02-08 marsweb

你是什麼意思，當你說底部。你的意思是低於屏幕/頁面的第一個div或底部？ –

如果在頁面底部 - 谷歌「粘腳」 – LorDex

請看我編輯的問題 – marsweb

您不需要使用表格來充分利用表格佈局：

您可能需要將div包裝在另一個div中以充當表格行。這些列將增長使它們各自一樣高，最高：

HTML

<div class='table-row'> 
    <div>Column 1<br>with<br>more<br>text</div> 
    <div>Column 2</div> 
    <div>Column 3</div> 
</div>

CSS

.table-row{ 
    display:table-row; 
} 
.table-row > div{ 
    display:table-cell 
    ;width:100px; 
    vertical-align:bottom; 
}

演示在這裏：http://jsfiddle.net/mhfaust/CV33q/

更新

Acutally，你根本不需要.table-row包裝器。

你可以在上面的代碼中刪除它，並將選擇器從.table-row > div更改爲jsust div，它仍然可以工作（儘管頁面上的其他標記不會是最好的方法 - d想在類似.table-cell的div上輸入一個類名，並使用該選擇器代替。）

來源

2014-02-08 11:56:06 Faust

您的解決方案工作。謝謝。 – marsweb

請記住，IE7及以下版本不支持'display：table-cell'，但現在這只是瀏覽器市場的一小部分。 – Faust

嘗試設置底部：0到兩格：

<div style="float:left; width:100px; height:150px;">Column 1</div> 
<div style=" bottom:0px; width:100px;">Column 2</div> 
<div style=" bottom:0px; width:100px;">Column 3</div>

Here is demo

，或者如果你只是想在下一行，看看試試這個：

<div style="float:left; width:100px; height:100px;">Column 1</div> 
<div style=" display:block; width:100px;">Column 2</div> 
<div style=" display:block; width:100px;">Column 3</div>

來源

2014-02-08 11:50:20

試過。但不工作。 – marsweb

@marsweb請參閱http://jsfiddle.net/LQsUq/ –

你想在頁面底部2和3個div。 – Vegeta

工作實例http://jsfiddle.net/cYbW7/

<div style="background: yellow; float: left; display: block; position: relative;"> 

    <div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div> 
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div> 
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div> 

</div>

來源

2014-02-08 11:55:50 CRABOLO

您的解決方案也有效。謝謝你的努力。 – marsweb

位置底部CSS一個div

回答

相關問題