對齊在DIV頂部和底部

我有一些文字和一個按鈕在他們的DIVs。我需要：對齊在DIV頂部和底部

對齊的DIV
底部的按鈕對齊文本上DIV的頂部

這裏是什麼，我希望它看起來像一個形象：

alignment example

的代碼，我有：

HTML：

<div class="table"> 
    <div class="cell"> 
     <p>Some text</p> 
     <a type="button" class="btn" href="#">Button</a> 
    </div> 
    <div class="cell"> 
     <p>The big one text</p> 
     <a type="button" class="btn" href="#">Button</a> 
    </div> 
    <div class="cell"> 
     <p>Some small text</p> 
     <a type="button" class="btn" href="#">Button</a> 
    </div> 
</div>

CSS：

.table { 
    display: table; 
} 
.cell { 
    float: none; 
    display: table-cell; 
    height: auto; 
} 
.cell .btn { 
    vertical-align: bottom; 
}

任何想法如何做到這一點？

來源

2014-03-12 Irina

嗨..你應該看看這裏。這可能會幫助你.http：//stackoverflow.com/questions/2743989/vertically-aligning-divs – ba1ar

是你的div高度是固定的？ –

@RiteshChandora不，他們不是。 – Irina

.table { 
    display: table; 
} 
.cell { 
    display: table-cell; 
    height: auto; 
    border:1px solid black; 
    padding-bottom:40px; 
    position:relative; 
} 
.cell .btn { 
    vertical-align: bottom; 
    position:absolute; 
    bottom:0px; 
}

DEMO

嘗試。根據你的按鈕高度調整填充

來源

2014-03-12 06:52:41 wishchaser

非常感謝你！它終於有效！ – Irina

@Irina請注意，根據** [spec]（http://www.w3.org/TR/CSS2/visuren.html#propdef-position）**，'position：relative'對'table-細胞'是**未定義**。因此絕對定位的元素將相對於它們最近的包含塊（它是* initial包含塊*）（本例中的''）被定位。檢查Firefox上的[demo]（http://jsbin.com/bukaxiyo/1/）鏈接以驗證。 –

@HashemQolami嗯。謝謝。在整個頁面中，它仍然適用於我，但沒有表格單元格上的'position：relative'（但我不知道爲什麼）。 – Irina

-1

使用：

.cell .btn { 
    position: absolute; 
    bottom: 0px; 
}

來源

2014-03-12 06:29:42 Anubhav

@downvoter downvote的原因是什麼？ – Anubhav

DEMO

.cell p{ 
    vertical-align: top; 
    display:inline; 
} 

.cell .btn { 
    display:block; 
    vertical-align: bottom; 
}

注：我有vertical-alignment一起增加了兩個display屬性，因爲p總是開始於一個換行符，所以序爲vertcal-alignment:top工作，你需要爲p元素添加display:inline

來源

2014-03-12 06:40:05

它可以工作，如果div高度是可變長度..請參閱tb鏈接http://jsfiddle.net/epwu7/2/ –

DEMO

試試這個，這是最簡單的複製並粘貼替換代碼

來源

2014-03-12 06:44:15

非常感謝，但不幸的是，如果要在px中添加寬度爲.table和width爲％。細胞，它不工作.. – Irina

隨時歡迎。@伊琳娜 –

對齊在DIV頂部和底部

回答

相關問題