0

Есть таблица из 4 столбцов, внутри каждого блока столбцов есть изображение, в последнем столбце кроме изображений есть текстовые строки, их может быть произвольное количество. Как сделать так, что бы вне зависимости от количества строк в последнем столбце таблицы, изображения во всех столбцах были на одном уровне ?

<table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

1 ответ 1

0

vertical-align: bottom;

td {
  vertical-align: bottom;
}
<table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

1
  • Подскажите пожалуйста, как сделать выравнивание в том случае, если текстовые строки будут еще и снизу изображений ? 23 апр 2020 в 18:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.