Выровняйте два элемента сверху и снизу ячейки таблицы - PullRequest
Новая
       27

Выровняйте два элемента сверху и снизу ячейки таблицы

4 голосов
/ 15 марта 2012

У меня есть таблица с несколькими строками и столбцами, и каждая ячейка содержит ссылку и несколько небольших изображений.Ссылка должна быть выровнена по верху ячейки, а изображения - по низу.К сожалению, использование атрибута вертикального выравнивания не работает, и оба элемента размещаются в середине ячейки.Вот HTML-код, который у меня есть: 

<table>
  <tr>
    <td style='width:120px; height:90px;'>
      <a href='1.html' style='vertical-align:top'>Link 1</a>
      <div style='vertical-align:bottom'><img src='1-1.jpg' /><img src='1-2.jpg' /></div>
    </td>
    <td style='width:120px; height:90px;'>
      <a href='2.html' style='vertical-align:top'>Link 2</a>
      <div style='vertical-align:bottom'><img src='2-1.jpg' /><img src='2-2.jpg' /></div>
    </td>
  </tr>
  <tr> ... </tr>
</table>

РЕДАКТИРОВАТЬ: высота и ширина td также определены в 120 x 90 px

1 Ответ

3 голосов
/ 15 марта 2012

Обновлено

Обратился к http://davidwalsh.name/table-cell-position-absolute и получил следующий ответ ... 

.tlink {
  position: relative;
  height: 100%;
}
.bimg {
  bottom: 0;
  position: absolute;
}
<table height="250" border="1">
  <tr>
    <td>
      <div class="tlink">
        <a href='#'>Link One</a>
        <div class="bimg">
          <img src="http://farm4.static.flickr.com/3575/3293166516_de2cd751fc.jpg" width="50" height="50" />
        </div>
      </div>
    </td>
  </tr>
</table>
...