如何在 table 单元格内的底部对齐 div

Question

我希望第二个 div 的内容与图像底部对齐。

<table>
  <tr>
    <td>
      <div>
        <div style="float: left;">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="float: right; vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 1

在第二个 div 中添加 margin-top，它将与图像的右下角对齐

<div style="float: right; vertical-align: bottom; margin-top:135px;">
          I want this text be on the same line as the bottom of the image
</div>

Answer 2

您可以使用 table 和 table-cell 显示属性执行此操作。

<table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div style="vertical-align: bottom; display: table-cell">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

尽管我建议您在单独的 CSS 文件中进行样式设置或将其嵌入，而不是内联添加。示例：

.outer {
  display: table;
}

.inner {
  display: table-cell;
  vertical-align: bottom;
}

<table>
  <tr>
    <td>
      <div class="outer">
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div>
        <div class="inner">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

如果你想让文字在底部，而且居中，你可以添加text-align: center。

Answer 3

您可以在 table:

内添加 display: table-cell 到 div 个元素

table tbody tr td div div {
  display: table-cell;
}

<table>
  <tr>
    <td>
      <div>
        <div>
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;" />
        </div>
        <div style="vertical-align: bottom;">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 4

请试试这个：

<table>
  <tr>
    <td>
      <div style="display:table">
        <div style="display:table-cell">
          <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"  style="max-width: 200px; max-height: 200px;"/>
        </div><br>
        <div style=" vertical-align: bottom;display: table-cell ">
          I want this text be on the same line as the bottom of the image
        </div>
      </div>
    </td>
  </tr>
</table>

DEMO

如何在 table 单元格内的底部对齐 div

How to align div on the bottom inside table cell

html

alignment