问题示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#main {
border: 1px solid black;
}
#main > div {
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main">
<div>
hello
</div>
<div>
world<br>
hello
</div>
</div>
</body>
</html>
运行结果
问题描述
当第二个div内的内容比第一个div内容的文字行数多时,发现第二个div与第一个div没有顶部对齐。
问题原因
将相关的div属性变成了inline-block,变成行内块元素,使得其既具有内联元素得属性,也具有块级元素的属性。对于内联元素,都具有vertical-align元素,其默认的对齐方式为baseline,基线对齐,基线指的是内容的下边缘。对于没有内容的div元素,其默认的基线为margin下边缘。故将相关的div中的vertical-align改成top就能使其顶部对齐。
具体修改点
#main > div {
display: inline-block;
vertical-align: top;
border: 1px solid black;
}