表格單元格中的內聯元素的垂直對齊方式

我有多個具有動態內容的div，並且它們都具有相同的高度。除了內容之外，提交按鈕位於每個div內，直接位於內容旁邊。但我想顯示按鈕在div的底部。表格單元格中的內聯元素的垂直對齊方式

HTML標記：

<div class="product-teaser-row"> 
    <div class="product-teaser"> 
     <h2>Title</h2> 

     <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p> 
     <button class="btn btn-grey" type="submit" name="action">Ansehen</button> 
    </div> 
    <div class="product-teaser"> 
     <h2>Title 2</h2> 

     <p>Content</p> 
     <button class="btn btn-grey" type="submit" name="action">Ansehen</button> 
    </div> 
</div>

CSS代碼：

div.product-teaser { 
    border: 1px #c7d2d6 solid; 
    padding: 0px 10px 10px 10px; 
    width: 216px; 
    height: 100%; 
    display: table-cell; 
} 

div.product-teaser-row { 
    display: table; 
    border-collapse: separate; 
    border-spacing: 10px; 
}

我已經嘗試過不同的東西像vertical-align: bottom的股利和display: inline-block的按鈕，但沒有工作了我。

這是我的代碼JSFiddle Demo。

來源

2014-07-16 KFO

要做到這一點，你只需要位置absolute您的按鈕，並定義了底部位置，並給予padding-bottom您的容器，以確保不會有任何內容覆蓋您的按鈕。

這裏進行了jsfiddle exemple.

來源

2014-07-16 12:45:02 Romain

這爲我工作：http://jsfiddle.net/C7TZn/1/ – KFO

你可以嘗試添加height屬性的p元素。

例子：

p{ 
    height: 95px; 
}

的jsfiddle演示：http://jsfiddle.net/robcabrera/g3p2Y/1/

來源

2014-07-16 12:49:09 rob

沒有工作，因爲我需要在'p'標籤的動態高度。也嘗試了'身高：100％;'但也沒有成功。 – KFO

您可以嘗試this

CSS

div.product-teaser { 
    border: 1px #c7d2d6 solid; 
    padding: 0px 10px 20px 10px; /*Increase the bottom padding so the button does not overlap the content*/ 
    width: 216px; 
    height: 100%; 
    display: table-cell; 
    position: relative; /*Add this css*/ 
} 

/*Set the button at the bottom using position: absolute;*/ 
    .btn-grey { 
     bottom: 5px; 
     left: 5px; 
     position: absolute; 
    }

來源

2014-07-16 12:49:26 Tushar

你爲什麼不把button在組合通道吃<div>標籤，如：

<div id=my> 

    <button class="btn btn-grey" type="submit" name="action"> 
      Ansehen  
    </button> 

</div>

根據margin-top把按鈕在底部，比如集合：

#my 
{ 
    margin-top:100px; 

}

FIDDLE here

來源

2014-07-16 12:51:11

表格單元格中的內聯元素的垂直對齊方式

回答

相關問題