Question

我正在尝试使用vertical-align：top将文本与div的顶部对齐，但由于某种原因它不起作用。我做错了什么？

#outer {
border: 1px solid black;
width: 100%;
height: 100%;
vertical-align: top;
}
img {
display: inline-block;
}
#message {
display: inline-block;
width: 50%;
}

<div id = 'outer'>
<img src = "https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
<div id = 'message'> 
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
</div>
</div>

Answer 1

您需要在文本元素而不是容器上设置vertical-align。 vertical-align指令在上下文中对齐元素，它不会影响元素的父元素。

现场演示：

#outer {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}
img {
  display: inline-block;
}
#message {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

<div id='outer'>
  <img src="https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
  <div id='message'>
    message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message
    message message message message
  </div>
</div>

使用垂直对齐将文本与div的顶部对齐

1 个答案: