将内容添加到 inline-block-div 会以意想不到的方式弄乱布局

Question

我有一块 HTML/CSS/JS，它的行为方式与我不期望的一样。有 3 个 div 显示为 inline-block 并且给定了固定的高度和宽度。在这些 div 中还有更多的 div，我正在填充这些内容。

我的期望是，内容将从顶部开始，到达 div 的底部，然后我会以某种方式溢出。至少我以前见过这样的。

但出于某种原因，下面 post 代码片段中的代码表现不同 - 两个灰色框向下移动。如果能解释为什么会这样，我将不胜感激。也许这对我来说太明显了，现在看了两个小时的代码并挠了挠头。

function demo() {
    document.getElementById("clock5").innerHTML = "test<br/>sometext";
}

.user {
    display: inline-block;
 width: 128px;
 height: 128px;
 font-size: 18pt;
 color: white;
    background-color: #999;
}

.present {
 background-color: green;    
}

<div id="users">
    <div class="user">
        <div class="username">user4</div>
        <div id="clock4"></div>
    </div>
    <div class="user present">
        <div class="username">user5</div>
        <div id="clock5"></div>
    </div>
    <div class="user">
        <div class="username">user6</div>
        <div id="clock6"></div>
    </div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

只需单击底部的演示按钮即可查看我在说什么。

Answer 1

overflow:hidden 会修复它。

它基本上是将所有内容都对齐到底部。所以要么溢出它，要么设置 vertical-align :top. What's the deal with inline-block

为什么溢出会修复它？来自 w3

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

function demo() {
    document.getElementById("clock5").innerHTML = "test<br/>sometext";
}

.user {
    display: inline-block;
    width: 128px;
    height: 128px;
    font-size: 18pt;
    color: white;
    background-color: #999;
}
.clock{
   border: #000 2px solid;
}
.present {
 background-color: green;    
}

<div id="users">
    <div class="user">
        <div class="username">user4</div>
        <div class="clock" id="clock4"></div>
    </div>
    <div class="user present">
        <div class="username">user5</div>
        <div class="clock" id="clock5">some text <br/> </div>
    </div>
    <div class="user">
        <div class="username">user6</div>
        <div class="clock"  id="clock6"></div>
    </div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

Answer 2

将 vertical-align 属性（几乎任何值，因为您固定了高度）设置为 .user 规则应该可以解决问题。

    function demo() {
        document.getElementById("clock5").innerHTML = "test<br/>sometexttest";
    }

    .user {
        display: inline-block;
     width: 128px;
     height: 128px;
     font-size: 18pt;
     color: white;
        background-color: #999;
        vertical-align: top;
    }

    .present {
     background-color: green;    
    }

    <div id="users">
        <div class="user">
            <div class="username">user4</div>
            <div id="clock4"></div>
        </div>
        <div class="user present">
            <div class="username">user5</div>
            <div id="clock5"></div>
        </div>
        <div class="user">
            <div class="username">user6</div>
            <div id="clock6"></div>
        </div>
    </div>
    <hr />
    <button type="button" onclick="demo()">demo</button>

将内容添加到 inline-block-div 会以意想不到的方式弄乱布局

Adding content to inline-block-div messes up layout in unexpected way

html

javascript

css

layout