Question

我有一段HTML / CSS / JS，其表现方式我不希望它表现得像。有三个div显示为内联块，并给出固定的高度和宽度。在这些div中有更多的div，我正在填充内容。

我的期望是，内容将从顶部开始，前往div的底部，然后以某种方式溢出。至少我在过去看过它。

但由于某种原因，我在下面发布的代码片段中的代码表现不同 - 两个灰色框向下移动。我会感谢他为什么会这样做的一些解释。也许这对我来说太明显了，现在看了两个小时的代码并抓住了我的头。

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

<?php // Open db connection $dbc = mssql_connect('host', 'sa', 'password'); if (!$dbc || !mssql_select_db('dbname', $dbc)) {die('Unable to connect or select database!');} // Select queries $query = mssql_query("SELECT [name],[customer],[start_time],[end_time],[status] FROM dbo.reservation ORDER BY last_update DESC"); // display the results! if (!mssql_num_rows($query)) { echo 'No records found'; } else { ?> <table> <thead> <tr> <th>Name</th> <th>Customer</th> <th>Start Time</th> <th>End Time</th> <th>Status</th> </tr> </thead> <tbody> <?php while ($row = mssql_fetch_row($query)) { echo'<tr>'; echo'<td>'. $row['name']."</td>"; echo'<td>'. $row['customer'].'</td>'; echo'<td>'. $row['start_time'].'</td>'; echo'<td>'. $row['end_time'].'</td>'; echo'<td>'. $row['status'].'</td>'; echo'<tr>'; } ?> </tbody> </table> <?php } ?>会修复它。

它基本上将所有内容与底部对齐。因此要么溢出它，要么设置overflow:hidden What's the deal with inline-block

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

＆＃39;内联块的基线＆＃39;是正常流程中其最后一个行框的基线，除非它没有流入的行框或者它的溢出＆＃39; property具有除＆＃39; visible＆＃39;之外的计算值，在这种情况下，基线是底边距边缘。

＆＃13;

vertical-align :top.

＆＃13;

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

＆＃13;

.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;    
}

＆＃13;

Answer 2

设置vertical-align属性（几乎任何值，因为您修正了高度）到.user规则应解决问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

向inline-block-div添加内容会以意想不到的方式混淆布局

2 个答案: