HTML/CSS：td nr 中的 Div。 2 在 td 1 中的 div 下垂直对齐

Question

我遇到了一个问题：S 我正在尝试将一个 div 和一个表格添加到两个 td 中，并通过 css 垂直对齐它们。看起来像这样：

<table>
  <tr>
    <td style='vertical-align: text-top;'>
      <table>
         <tr>
            <td>Some Randomness on some lines<br><br><br>until here.</td>
         </tr>
      </table>
    </td>
    <td style='vertical-align: text-top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>

现在，div 正好出现在左表最后一行的级别上。为什么会这样呢？ .....我之前在图像方面遇到过这个问题，但我只是通过调整图像大小解决了它......

感谢您的帮助！

弗洛

Answer 1

尝试使用“vertical-align:top”

<table>
  <tr>
    <td style='vertical-align: top;'>
      <table>
         <tr>
            <td>Some Randomness on some lines<br><br><br>until here.</td>
         </tr>
      </table>
    </td>
    <td style='vertical-align: top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>

Answer 2

从问题中不确定您要做什么，但如果您希望它们垂直对齐，您可以更改 HTML 使其只是一张表：

<table>
  <tr>
    <td style='vertical-align: text-top;'>
      Some Randomness on some lines<br><br><br>until here.</td>
    <td style='vertical-align: text-top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>

示例： http://jsfiddle.net/jasongennaro/Q5YGm/

Answer 3

我使用 HTML 设置 TD 的宽度和高度，使用 TD 上的 valign 属性，最后使用 style 属性使用 CSS 设置 TD 边框的样式。

<td height="300" width="300" valign="top" style="border: 1px solid red;">
   text here
</td>