gpt4 book ai didi

html - 这是 CSS 中的错误吗?

转载 作者:太空狗 更新时间:2023-10-29 12:30:16 26 4
gpt4 key购买 nike

这听起来像是一个过时的话题,因为由于 flex-box 和 grid,没有人仍然使用 inline-block 属性,但我想知道它,我想询问一下。

当创建两个 div 并将它们都分配为显示为内联 block ,然后在其中一个中添加任何元素时,结果很奇怪,其中包含该元素的 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 都没有流内容,但是前两个都有 top 属性,而最后一个两个不同,一个是top,一个是baseline:

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>

在第一种情况下,文本与顶部对齐,在下一种情况下,即使它们没有流式内容,也与 div 的基线对齐。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com