<分区>
标签 css
<分区>
我正在学习css，有一个疑问。当我向左 div float 时，它们会很好地位于一条水平直线上，但其中任何一个中都有一些文本移动它会垂直移动。我用谷歌搜索但找不到很好的解释。请帮助我理解为什么会这样。
div#red {
width: 100px;
height: 100px;
border: 1px solid red;
}
div#blue {
width: 25px;
height: 25px;
border: 1px solid blue;
}
div#green {
width: 50px;
height: 50px;
border: 1px solid green;
}
.box {
display: inline-block;
}<div class="box" id="red">
</div>
<div class="box" id="blue">
Tri
</div>
<div class="box" id="green">
</div>最佳答案
您可以将vertical-align: bottom 添加到.box:
div#red {
width: 100px;
height: 100px;
border: 1px solid red;
}
div#blue {
width: 25px;
height: 25px;
border: 1px solid blue;
}
div#green {
width: 50px;
height: 50px;
border: 1px solid green;
}
.box {
display: inline-block;
vertical-align: bottom;
}<div class="box" id="red">
</div>
<div class="box" id="blue">
Tri
</div>
<div class="box" id="green">
</div>关于css - 向左浮动带有文本的 div 将其向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32878931/