Question

当第一个<td>的高度大于第二个<td>时，包含第二个<td>的文本与中心对齐。我希望当第一个<td>的高度大于第二个<td>的高度时，第二个css的文字或元素会对齐到左上角。

我怎样才能使用<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <table border="1"> <tr> <td> <div style="background-color:red;width:100px;height:200px">some text1</div> </td> <td> some text2 </td> </tr> </table> </body> </html>？

＆＃13;

MVC

＆＃13;

Answer 1

这应该有效：

table td:nth-child(2) {
   vertical-align: top;
}

Answer 2

如果要将所有td元素中的文本对齐到顶部，请将vertical-align: top应用于td标记。

如果您只想在第二个元素中对齐文本，请使用

table tr td:nth-child(2)代替table tr td。 nth-child仅将规则应用于第二个td元素。

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

table tr td{ 
  background-color:red;
  width:100px;
  height:200px;
  vertical-align:top
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>
        <div>some text1</div>
      </td>
      <td>
        some text2
      </td>
    </tr>
  </table>
</body>
</html>

当第一个``的高度大于第二个`时，如何将第二个``中的元素对齐到左上角

2 个答案: