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

Question

我有多个具有动态内容的div，并且它们的高度都相同。 在内容旁边，每个div内部都有一个Submit Button，它紧邻内容。 但是我想在div的底部显示Button。

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在div上的vertical-align: bottom和display: inline-block在Button上的display: inline-block ，但是对我没有任何帮助。

这是我的代码的JSFiddle演示 。

Answer 1

你可以试试这个

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;
    }

Answer 2

为此，您只需要absolute 定位按钮并定义底部位置，并在容器的底部加上padding-bottom以确保没有内容会覆盖按钮。

这里是一个jsfiddle的例子。

Answer 3

您可以尝试将height属性添加到p元素。

例：

p{
  height: 95px;
}

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

Answer 4

为什么不将button放在单独的<div>标签中，例如：

 <div id=my>

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

</div>

根据页margin-top设置margin-top以将按钮放在底部，例如：

#my
{
   margin-top:100px;

}

在这里