Разместить текст внизу, а не под другим текстом

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

Вот один из способов добиться того, что

.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 для 2-го варианта.
Из этих двух вариантов лично я бы пошел с 1-го, , но вы должны быть осторожны с фиксированными ширинами и высотами (из-за абсолютного позиционирования).