Odin项目着陆页蓝色盒子无法横向并排问题求助

你的问题核心是没有给.box-cover的父容器设置flex布局——flex是用来控制父容器的子元素排列的，直接给子元素加display:flex没用。现在四个.box-cover都是块级元素，默认垂直堆叠，自然不会横向排列。

修改步骤： #

1. 给section2里的四个.box-cover套一个统一的父容器，比如boxes-container
2. 给这个父容器设置display: flex，让子元素横向排列
3. 清理.box和.box-cover里冗余的flex属性

修改后的完整代码： #

CSS部分：

* {
  font-family: Roboto, sans-serif;
  color: #f9faf8;
}

h2 {
  font-size: 24px;
  font-weight: 900;
  color: #f9faf8;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

nav ul li {
  list-style-type: none;
  font-size: 18px;
  color: #e5e7eb;
}

.hero {
  font-size: 48px;
}

button {
  background-color: #3882f6;
  border-radius: 5px;
}

#section1 {
  background-color: #1f2937;
  width: 100%;
  height: 25vh;
}

#section2 {
  background-color: #f9faf8;
  width: 100%;
  height: 25vh;
  color: #1f2937;
}

/* 调整.box样式，去掉不必要的flex属性 */
.box {
  border: 1px solid #3882f6;
  padding: 50px;
  width: 100%;
  box-sizing: border-box;
}

/* 简化.box-cover样式，保留宽度和盒模型 */
.box-cover {
  width: 25%;
  box-sizing: border-box;
  padding: 0 10px; /* 可选：给盒子之间加间距 */
}

/* 新增父容器的flex布局 */
.boxes-container {
  display: flex;
  justify-content: space-around; /* 让盒子均匀分布，也可用space-between */
  width: 80%; /* 可选：限制容器宽度避免过挤 */
  margin: 0 auto; /* 让容器居中 */
}

HTML部分：

<div id="section1">
  <nav>
    <h2>Header Logo</h2>
    <ul>
      <li><a>Header link one</a></li>
      <li><a>Header link two</a></li>
      <li><a>Header link three</a></li>
    </ul>
  </nav>
  <header>
    <h1 class="hero">This website is awesome</h1>
    <p>text here</p>
    <button>sign up</button>
  </header>
</div>
<section id="section2">
  <h1 style="color: #1f2937;">Some random information</h1> <!-- 修复文字颜色，避免白色在白背景看不见 -->
  <!-- 新增父容器包裹所有.box-cover -->
  <div class="boxes-container">
    <div class="box-cover">
      <div class="box"></div>
    </div>
    <div class="box-cover">
      <div class="box"></div>
    </div>
    <div class="box-cover">
      <div class="box"></div>
    </div>
    <div class="box-cover">
      <div class="box"></div>
    </div>
  </div>
</section>
<section>
  <p></p>
</section>
<section>
  <div><button>sign up</button></div>
</section>
<footer>
  <p></p>
</footer>

关键说明： #

• flex布局的核心是给父容器加display:flex，它的直接子元素会自动变成flex item，默认横向排列（flex-direction:row是默认值，无需额外声明）
• .box-cover的width:25%是合理的，但要配合box-sizing:border-box避免padding/margin撑大盒子
• 额外修复了section2中h1的颜色问题，否则白色文字在白色背景上完全不可见

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