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

Question

<分区>

Answer 1

将 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>