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。

Answer 2

您可以在表格中添加display: table-cell到div元素：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

<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 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

如何在表格单元格底部对齐div

4 个答案: