如何使含img、h1、p标签的盒子水平排列？设置30%宽度无效

嘿，我瞅了下你的代码，问题核心出在HTML结构错误上——你把三个需要并排的内容块（img+h3+p）全塞进了同一个.box容器里！这就导致CSS里设置的width:30%和float:left只作用在这一个盒子上，自然没法实现三个盒子水平排列的效果。

下面是具体的修复步骤和修正后的代码：

1. 修正HTML结构 #

把每个独立的内容模块分别放进单独的.box div中，确保每个模块都是一个独立的容器：

<section>
  <div id="boxes">
    <div class="container">
      <!-- 第一个盒子 -->
      <div class="box">
        <img src="./img/logo_html.png" alt="Html5">
        <h3>HTML5 Markup</h3>
        <p>blah blah</p>
      </div>
      <!-- 第二个盒子 -->
      <div class="box">
        <img src="./img/logo_css.png" alt="Css3">
        <h3>Styling CSS</h3>
        <p>blah blah</p>
      </div>
      <!-- 第三个盒子 -->
      <div class="box">
        <img src="./img/logo_brush.png" alt="Graphic Design">
        <h3>Graphic Design</h3>
        <p>blah blah</p>
      </div>
    </div>
  </div>
</section>

2. 优化CSS，解决宽度溢出和浮动塌陷问题 #

默认的盒模型会把padding算在宽度之外，导致三个30%宽度的盒子加上padding后总宽度超过100%，从而换行。另外，使用float后父元素可能出现高度塌陷的问题，需要处理：

/* BOXES */
#boxes {
  margin-top: 20px;
  /* 解决浮动塌陷，让父元素包裹住浮动的子元素 */
  overflow: hidden;
}

#boxes .container {
  /* 可选：给容器加个最大宽度，限制内容范围 */
  max-width: 1200px;
  margin: 0 auto;
}

#boxes .box {
  float: left;
  width: 30%;
  text-align: center;
  padding: 10px;
  /* 让padding包含在宽度内，避免溢出 */
  box-sizing: border-box;
  /* 可选：加一点margin，让盒子之间有间隙 */
  margin: 0 1.5%;
}

#boxes .box img {
  width: 90px;
}

额外说明 #

• 我添加了margin: 0 1.5%是为了让三个盒子之间有间距，总宽度30%*3 + 1.5%*2 = 93%，剩下的7%是左右的留白，也可以根据需求调整。
• 如果不想用float，也可以用更现代的Flexbox布局，代码会更简洁：给.container设置display: flex; justify-content: space-between;，然后.box设置width: 31%;（留间隙），这样不需要处理浮动塌陷的问题，响应式也更友好。

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