css - 不使用显示 :Table-Cell in CSS 的 DIV 底部文本

Question

是否有任何其他正确的方法在底部显示文本，因为使用 Display:Table-Cell，我不能使用边距属性。

div.Product2 {
    display: table-cell;
    width: 250px;
    height: 120px;
    text-indent: 15px;
    vertical-align: bottom;
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: url('../images/cp_bg.png') no-repeat center 10px #008f00;

}

Answer 1

我相信您可以在没有 table-cell 的情况下做到这一点的唯一方法是使用多个 div。您可以选择保留 table-cell 并将其放在包装器 div 中，或者只将您的文本放入子 div

div.Product2 {
    /*display: table-cell;*/
    width: 250px;
    height: 120px;
    text-indent: 15px;
    /*vertical-align: bottom;*/
    padding-bottom: 10px;
    letter-spacing: 1px;
    background: url('../images/cp_bg.png') no-repeat center 10px #008f00;
    position: relative;
}

div.product3 {
    position: absolute;
    bottom: 0;
}

<div class="Product2">
  Some Text  
  <div class="product3">
     Bottom Text
  </div>
</div>