Question

我有多个带动态内容的div，所有这些div都有相同的高度。除了内容之外，提交按钮位于每个div内部，该div直接位于内容旁边。但我想在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;
}

我已经尝试了不同的内容，例如div上的vertical-align: bottom和Button上的display: inline-block，但没有任何效果。

以下是我的代码JSFiddle Demo。

Answer 1

您可以尝试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;
    }

Answer 2

要做到这一点，您只需定位 absolute您的按钮并定义底部位置并为您的容器提供padding-bottom以确保没有内容会覆盖您的按钮。

此处为jsfiddle exemple.

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设置，将按钮放在底部，如：

#my
{
   margin-top:100px;

}

FIDDLE here

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

4 个答案: