Question

我遇到了一个问题：我正在尝试将div和一个表添加到两个tds中并通过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>

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

3 个答案: