如何在表格单元格底部对齐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

您可以使用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。