我有 3 个 div 显示在水平对齐的行内 block 中:
div {
background:blue;
height:200px;
width:30%;
margin:0px;
padding:0px;
border:10px solid red;
display:inline-block;
box-sizing:border-box
}
当我将一个文本元素添加到其中一个 div 中时，它会向下移动 *(除非文本是 position:absolute;)。
这是什么原因？
最佳答案
您需要使用 CSS 将 vertical-align: top 添加到您的 div。 vertical-align 的默认属性是 baseline，这就是为什么您的 div 内容会向下移动到底部。
这是一个 jsBin demo .
div {
background: blue;
height: 200px;
width: 30%;
margin: 0px;
padding: 0px;
border: 10px solid red;
display: inline-block;
vertical-align: middle;
box-sizing: border-box
}
#b {} text {
/* position:fixed; */
color: white;
font-size: 20px;
}<body>
<div id="a">
<text>hello</text>
</div>
<div id="b"></div>
<div id="c"></div>关于html - 添加文本元素会破坏 div 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26621226/