表格单元格中的内联元素的垂直对齐方式

我有多个具有动态内容的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

表格单元格中的内联元素的垂直对齐方式

回答

相关问题