Question

我有两个div与display: inline-block; https://jsfiddle.net/3q0kbv2k/位于同一行旁边。当我将overflow: hidden;放在第一个div上时，第二个向下移动一个小偏移量。

HTML：

<!-- CODE ON ONE LINE ON PURPOSE -->
<!-- WHITESPACES BREAK LAYOUT -->
<div class="foo">foooooooooooooooooooooo</div><div class="bar"><div>bar</div></div>

的CSS：

.foo {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
}

为什么会这样？

我发现this old question描述的是同一个场景并包含一个解决方法，但我有兴趣理解为什么这种情况发生了，这是一个错误还是正常行为？

Answer 1

来自spec：

＆＃39;内联块的基线＆＃39;是其最后一个行框的基线在正常流程中，除非它没有流入线框或如果它的溢出＆＃39;属性具有除“可见＆＃39;”之外的计算值在哪种情况下，基线是底部边缘边缘。

你的foo div有溢出＆＃34;除了可见，＆＃34;所以它的基线是＆＃34;底部边缘边缘。＆＃34;

您的bar div有明显溢出，因此其基线是其文本的基线。

您可以通过为它们提供相同的vertical-align样式来解决此问题：

＆＃13;

.foo {
    display: inline-block;
    width: 5%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
    vertical-align: middle;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
    vertical-align: middle;
}

＆＃13;

<div class="foo">foooooooooooooooooooooo</div>
<div class="bar"><div>bar</div></div>

＆＃13;

两个div同一行：为什么溢出：隐藏;导致垂直偏移？

1 个答案: