HTML – 这是CSS中的错误吗？

概述参见英文答案 > Why my inline-block divs are not aligned when only one of them has text?                                     4个 >             Why does this inline-block element have content that is not verti 参见英文答案 > Why my inline-block divs are not aligned when only one of them has text?                                     4个
>             Why does this inline-block element have content that is not vertically aligned                                    4个
>             My inline-block elements are not lining up properly                                    5个
>             Why is this inline-block element pushed downward?                                    8个
>             Understand inline-element,vertical-align,line-box and line-height                                    1个
这可能听起来像一个过时的主题,因为由于flex-Box和grID,没有人仍然使用内联块属性,但我想知道它,我想询问它.

当创建两个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 {    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属性,而后两个是不同的,一个顶部,另一个是基线：

div {  display: inline-block;  wIDth: 100px;  height: 150px;  background: gray;}.right{  vertical-align:baseline;}.left{  vertical-align:top;}

Text<div ></div><div ></div><br>Text<div ></div><div ></div>

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

解决方法 发生这种情况的原因是因为内联元素的默认 vertical-align值是基线.

然后问题变成：内联块元素的基线是什么？在这里,我们必须区分有和没有flow content的元素：

>对于具有流内容的元素,例如问题中的左div,基线与最后一个内容元素的基线相同.(*)对于左侧div,这对应于内部跨度的基线.
(*)设置元素溢出时还有一些额外的注意事项,但我会将其排除在范围之外.
>对于没有流内容的元素,例如问题中的右边div,基线是元素边距框的底部.对于正确的div,这对应于div本身的底部.

因此,总结一下：您看到垂直移位的原因是因为元素根据其基线垂直对齐,并且具有和不具有内容的元素的基线以不同方式计算.

要测试它,只需尝试向右侧div添加一些文本,您将看到两个基线现在是如何相同的.

div {  display: inline-block;  wIDth: 100px;  height: 100px;  background: gray;}

<div ID="left">Text</div><div ID="right">Other text</div>

通过设置字体大小的动画,下面的示例更清楚地说明了基线的变化如何影响垂直定位：

div {  display: inline-block;  wIDth: 100px;  height: 100px;  background: gray;}#left {  Transition: all 2s ease;  animation: anim 2s infinite linear alternate;}@keyframes anim {  0% {Font-size: 100%;}  100% {Font-size: 300%;}}

<div ID="left">Text</div><div ID="right"></div>

总结

以上是内存溢出为你收集整理的HTML – 这是CSS中的错误吗？全部内容，希望文章能够帮你解决HTML – 这是CSS中的错误吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。