將文本放置在底部而不是右下方

Question

我使用不同的DIV標記來充當表格，我想要在內容DIV的底部獲得另一個DIV。

<div class="table"> 
    <div class="table-row"> 

     <div class="table-information"> 
      Content 
     </div> 

     <div class="table-content"> 
      More content 

      <div class="extra"> 
       Here's the extra content 
      </div> 
     </div> 

    </div> 
</div> 

這裏的CSS：

.table { 
    display: table; 
} 

.table-row { 
    display: table-row; 
} 

.table-information { 
    background-color: #eaeaea; 
    height: 150px; 
    padding: 10px 15px; 
    width: 150px; 
} 

.table-content { 
    display: table-cell; 
    height: 150px; 
    padding: 10px 15px; 
} 

.extra { 
    vertical-align: bottom 
} 

正如你可以看到我有vertical-align: bottom;爲extra類。我希望將該DIV中的內容放在底部，而不是在文本More content下面。但是當我嘗試這個解決方案時沒有任何反應。

http://jsfiddle.net/edgren/3jjbV/

我怎樣才能解決這個問題？

在此先感謝。

Answer 1

這裏是1點的方式來實現該

.table-content { 
    display: table-cell; 
    height: 150px; 
    padding: 10px 15px; 
    position:relative; 
    width:150px; 
} 
.extra { 
    vertical-align: bottom; 
    bottom:0; 
    position:absolute; 
} 

我通過添加相對位置至容器table-content然後絕對定位底部到extra做到這一點。
這裏是一個fiddle

---

另一種方法是這樣的：

.extra { 
    vertical-align: bottom; 
    display:table-cell; 
    height: 150px; 
    width:150px; 
} 

這裏是第二個選項fiddle。
從這兩個選項我個人會去第一個， 但你應該小心固定的寬度和高度（由於絕對定位）。