高度从顶部增加

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

请更新以下课​​程。添加Dom;而不是display: inline-table到display: inline-block;类。

body > div.content > div