使用inline-block实现<section id='section-three'>区块横向排列问题求助

你当前的问题核心是错误地给父容器section设置了display: inline-block，而没有给需要并排的子div设置该属性。要实现三个div横向排列的效果，需要针对子元素做以下修改：

核心修改步骤 #

1. 给三个div添加display: inline-block并设置宽度
   div默认是块级元素，会独占一行，必须将每个div设置为inline-block才能让它们横向排列。同时设置width: 33.33%实现三等分，配合box-sizing: border-box确保padding不会撑开元素宽度。

2. 消除inline-block元素间的空白间隙
   浏览器会把inline-block元素之间的换行、空格解析为空白，导致总宽度超过100%无法并排。最简单的解决方式是给父容器设置font-size: 0，再给子元素恢复原有字体大小。

3. 恢复父容器的默认布局
   section不需要设置display: inline-block，保持默认的块级元素状态即可，这样它会自动占满一行，容纳内部的三个div。

修改后的完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 新增：统一盒模型计算方式 */
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#header {
  background-image: url("http://traversymedia.com/downloads/assets/beachshowcase.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 50px;
  line-height: 1.2;
}

#text {
  margin: 5px;
  font-size: 20px;
}

.button {
  font-size: 18px;
  text-decoration: none;
  color: #926239;
  border: #926239 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.button:hover {
  background-color: #926239;
  color: white;
}

#section-three {
  font-size: 0; /* 消除子元素间的空白间隙 */
}

.block, #block-two {
  display: inline-block; /* 设置为行内块元素 */
  width: 33.33%; /* 三等分宽度 */
  font-size: 17px; /* 恢复字体大小 */
}

.block {
  background: #926239;
  color: white;
  padding: 20px;
}

#block-two {
  padding: 20px;
}

效果说明 #

修改完成后，三个div会完美横向并排，呈现你想要的三栏布局，完全基于inline-block实现，无需使用flex。

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