html - 高度从顶部增加

Question

我有两个看起来很完美的div

当我在 navBar div 中添加更多链接时，它会增加与顶部重叠的第一个 Div 的高度。我根据用户级别访问权限显示不同的链接，每个帐户都有不同的编号。的导航链接。所以我无法固定它的位置并使用它。我想让它从底部增加高度

这是我使用的代码

<div class="content">
<img src="/img/logo2.png" id="logo" />
<div id="loggedUser">
<div class="blockTitle">Logged User Details</div>
<table>
    <tr>
        <td>Welcome</td>
        <td><?php echo $name;?></td>
    </tr>
    <tr>
        <td>Username</td>
        <td><?php echo $username;?></td>
    </tr>
    <tr>
        <td>Last Login IP</td>
        <td><?php echo $last_login_ipv4;?></td>
    </tr>
    <tr>
        <td>Last Login </td>
        <td><?php echo $last_login_time;?></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><?php echo substr($email,0,3) . "****". substr($email,-10);?></td>
    </tr>
    <tr>
        <td>Access Level</td>
        <td><?php echo $access_level;?></td>
    </tr>
</table>
</div>
<div id="navigation">
<div class="blockTitle">NavBar</div>
<span class="navlinks"><i class="material-icons">perm_media</i><a href="photos">Photos</a></span>
<span class="navlinks"><i class="material-icons">build</i><a href="#">Settings</a></span>
<span class="navlinks"><i class="material-icons">power_settings_new</i><a href="/logged/logout">Logout</a></span>
</div>
</div>

CSS 代码

body > div.content > div{
    position:relative;
    display:inline-block;
    border: 1px solid #E9EAED;
    box-shadow:0px 0px 1px #E9EAED;
    background: #ffffff;
    border-radius: 2px;
    padding:10px;
}
body >div.content >div div{
    display:block;
    border:none;
    margin:2px 10px;    
}
div.content .blockTitle{
display:block;
text-align:center;
border:none;
background:#1DB6F0;
color:#ffffff;
width:100%;
margin:0px;
padding:5px 0px;
}
.navlinks{
margin:auto 10px;
}
/*Left Window.php*/
table{
    table-layout:fixed;
}
#loggedUser td{
    width:100px;
}
td:first-of-type{
    font-weight:400;
}
#navigation span{
    display:block;  
}
#navigation .material-icons{
    position: relative;
    top: 6px;
    margin-right: 21px;
}

#loggedUser,#navigation{    
    width:300px;    
}
#navigation{    
    top: 392px;
    left: -326px;
    margin-top:-392px;  
}

我尝试按照@Fazil Abdulkhadar 在回答中的建议更改 div display:block，当时它工作正常，但后来我添加了更多链接，现在它在不同的列中做同样的事情

管理员账户比员工有更多的链接

在员工帐户中看起来不错

Answer 1

请更新您的后续类(class)。添加显示:内联表；而不是 display: inline-block; 到 body > div.content > div 类。

body > div.content > div {
    position: relative;
    display: inline-table;
    border: 1px solid #E9EAED;
    box-shadow: 0px 0px 1px #E9EAED;
    background: #ffffff;
    border-radius: 2px;
    padding: 10px;
}