时间戳

首页 > 解决方案 > 如何将 div 与导航栏对齐？

html - 如何将 div 与导航栏对齐？

问题描述

我有一个带有导航栏和 4 个 div 的布局。第一个 div 由导航栏裁剪。有谁知道我能做什么？

<body>
  <div id="app" class="flex-container">
    <nav class="navbar default-layout p-0 fixed-top d-flex flex-row" style="height: 63px;">
      <select id="region" onchange="initProcess();" style="position:absolute;background:#eaeaea;">
      </select>
      <div style="width: calc(100% - 74px); padding-left: 74px; left: 0; text-align: center; color: #fff">
        <img src="images/co-logo.png" style="width: 100px; margin-top: -6px">
        <h4>Dashboards</h4>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-right">
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-right" type="button" data-toggle="offcanvas">
                    <span class="mdi mdi-menu"></span>
                </button>
      </div>
    </nav>
    <div class="flex-item" style="background-color:red"></div>
    <div class="flex-item" style="background-color:blue"></div>
    <div class="flex-item" style="background-color:yellow"></div>
    <div class="flex-item" style="background-color:grey"></div>
  </div>
</body>

在此处输入图像描述

标签： htmlcsslayoutalignment

解决方案

您可以轻松添加等于导航栏高度的 padding-top css 属性。在您的情况下，它将是：

.flex-container {
     padding-top: 63px;
}

推荐阅读