HTML/CSS中Div块未按文档顺序纵向排列问题求助

我正在创建一个用于样式参考的虚拟/模板Web模型，前两个div块（banner和navbar）显示正常，但main-container相关的区块并没有显示在它们下方，尽管所有元素的position都设为relative了。

当前布局效果 #

预期布局效果 #

原代码 #

CSS代码 #

html {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 30pt;
}

div {
  display: block;
}

.banner {
  background-color: #8A100B;
  color: #EDEBDB;
  height: 70px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}

.banner-header {
  margin: 10px;
  font-size: 28px;
}

.banner-image {
  margin: 10px;
}

.banner-content {
  margin: 20px;
  font-size: 16pt;
}

.banner-login-button {
  width: 1370px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#button-login {
  text-indent: 0!important;
  font-weight: normal;
  background-image: none!important;
  font-size: 16pt;
  background: none repeat scroll 0 0 #8A100B;
  border: medium none;
  box-shadow: none;
  color: #FFFFFF;
  cursor: pointer;
}

.navbar {
  background-color: #ede6e6;
  /*border-bottom: 2px solid #CCC;*/
  height: 180px;
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
}

.navbar-header {
  margin-left: 45px;
  color: #404040;
}

.main-container {
  max-width: 1350px;
  position: relative;
  display: flex;
  flex-direction: row;
  /*margin-top: 231px;*/
}

#menu-container {
  background: #ede6e6;
}

#content-container {
  background: #fff;
}

HTML代码 #

<div class="banner">
  <div class="banner-image"><img src="https://static.thenounproject.com/png/778835-200.png" alt="Logo" height="50px" width="70px"></div>
  <div class="banner-header"><strong><p>DummyTemplate</p></strong></div>
  <div class="banner-content">
    <p>Student Registration Waitlist Portal</p>
  </div>
  <div class="banner-login-button">
      <img id="login-icon" src="https://static.thenounproject.com/png/778835-200.png" alt="Profile Icon" height="50px" width="50px">
      <button id="button-login" type="button">Sign in</button>
  </div>
</div>

<div class="navbar">
  <div class="navbar-header">
    <h1>Search Courses/My Requests</h1>
    <!--try to get it to work with site name-->
  </div>

  <main class="main-container">
    <section id="menu-container">
      <p>placeholder</p>
    </section>

    <section id="content-container">
      <p>placeholder</p>
    </section>
  </main>

解决方法 #

问题根源是HTML结构错误：你把main-container放在了navbar的div内部，而navbar设置了固定高度180px且是flex布局，导致main-container被限制在navbar的范围内，无法正常显示在下方。

修正步骤： #

1. 将<main class="main-container">从.navbar的div中移出，作为与banner、navbar同级的元素。
2. 优化main-container的样式，让布局更贴合预期：
   • 添加margin: 20px auto;，让容器水平居中并和上方保持间距
   • 给#menu-container设置固定宽度（比如width: 25%; padding: 10px;）
   • 给#content-container设置flex: 1; padding: 10px;，让它占满剩余空间

修正后的代码 #

CSS调整（新增/修改部分）

.main-container {
  max-width: 1350px;
  position: relative;
  display: flex;
  flex-direction: row;
  margin: 20px auto; /* 新增 */
}

#menu-container {
  background: #ede6e6;
  width: 25%; /* 新增 */
  padding: 10px; /* 新增 */
}

#content-container {
  background: #fff;
  flex: 1; /* 新增 */
  padding: 10px; /* 新增 */
}

HTML修正

<div class="banner">
  <div class="banner-image"><img src="https://static.thenounproject.com/png/778835-200.png" alt="Logo" height="50px" width="70px"></div>
  <div class="banner-header"><strong><p>DummyTemplate</p></strong></div>
  <div class="banner-content">
    <p>Student Registration Waitlist Portal</p>
  </div>
  <div class="banner-login-button">
      <img id="login-icon" src="https://static.thenounproject.com/png/778835-200.png" alt="Profile Icon" height="50px" width="50px">
      <button id="button-login" type="button">Sign in</button>
  </div>
</div>

<div class="navbar">
  <div class="navbar-header">
    <h1>Search Courses/My Requests</h1>
    <!--try to get it to work with site name-->
  </div>
</div> <!-- 新增：闭合navbar的div -->

<main class="main-container">
  <section id="menu-container">
    <p>placeholder</p>
  </section>

  <section id="content-container">
    <p>placeholder</p>
  </section>
</main>

内容的提问来源于stack exchange，提问作者Terry