Html 从顶部增加的高度

我有下面两个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>

我试着按照@Fazil Abdulkhadar在回答中的建议更改

div display: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;
}

@阿卡什库马尔你可以用一个简单的方法来构造相同的。请看演示。如果要在块中添加更多项，请参阅演示中的代码。再次出现问题后，它会向上移动记录的用户详细信息，navbari尝试将其显示更改为block，但它会给出类似的更新问题
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;
}