这个话题可能听起来有些过时,因为由于flex-box和grid的出现,没有人再使用inline-block属性了,但我想探讨一下并询问一下相关内容。
当创建两个div,并将它们都分配为inline-block显示,然后在其中一个div内添加任何元素时,结果会相当奇怪,包含该元素的那个div将滑动到另一个div的底部,减去添加元素的高度。
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
<div id="left">
<span>Text</span>
</div>
<div id="right"></div>
要解决这个问题,只需要将 div 垂直对齐到顶部即可。但是奇怪的是,即使没有对受影响的 div 进行垂直对齐,我们仍然可以通过对另一个未受影响的 div 进行垂直对齐来得到相同的结果,那么到底发生了什么呢?
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
#left{
vertical-align: baseline;
}
#right{
vertical-align: top;
}
<div id="left">
<span>text</span>
</div>
<div id="right"></div>
更新:
为了更清楚地解释,我删除了子元素并在两个div外添加了文本,并添加了两个div,现在所有的div都没有流内容,但前两个都有一个顶部属性,而最后两个则不同,一个是顶部,另一个是基线:
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
.right{
vertical-align:baseline;
}
.left{
vertical-align:top;
}
Text
<div class="right"></div>
<div class="left"></div>
<br>
Text
<div class="left"></div>
<div class="left"></div>