添加标题后响应式图片网格布局失效，问题排查求助

核心问题点 #

1. 顶部图片容器未设置横向排列规则：.grid-container1默认是块级元素，会占满整行，导致两个容器无法并排，自然没法实现“各占50%空间”的要求。
2. 无效CSS属性误用：float: bottom是不存在的属性，h3作为块级元素会独占一行，直接破坏了图片与标题的垂直布局，同时打乱整体网格。
3. 浮动未处理导致布局塌陷：使用float后未清除浮动，容器高度无法包裹内部元素，后续布局会出现错位。
4. 底部图片容器布局逻辑混乱：.grid-container2只给img设置了宽度和float，但容器本身没有布局控制，加上h3的块级特性，4张图片无法正确排成一行。

修复后的代码 #

CSS部分

body {
  padding: 0;
  font-family: sans-serif;
  background: #f2f2f2;
  margin: 0;
  box-sizing: border-box; /* 统一盒模型，避免padding撑开容器 */
}

/* 清除浮动通用类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 顶部行容器 */
.first-row {
  border: 3px solid green;
  width: 100%;
  margin-bottom: 10px;
}

.grid-container1 {
  border: 1px solid red;
  width: 50%; /* 每个容器占50%宽度 */
  float: left; /* 横向排列 */
  box-sizing: border-box; /* 包含border和padding在宽度内 */
}

.grid-container1 h3 {
  font-size: 1rem;
  padding: 5px;
  margin: 0; /* 清除默认margin */
}

.grid-container1 img {
  width: 100%; /* 图片占满容器宽度 */
  padding: 5px;
  box-sizing: border-box;
}

.grid-container2 {
  border: 1px solid blue;
  width: 25%; /* 每个容器占25%宽度 */
  float: left;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.grid-container2 h3 {
  font-size: 1rem;
  padding: 5px;
  margin: 0;
}

.grid-container2 img {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

HTML部分

<div class="first-row clearfix">
  <div class="grid-container1">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">  
    </a>
    <h3>lorem ipsum</h3>
  </div>
  <div class="grid-container1">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">    
    </a>
    <h3>lorem ipsum</h3>
  </div>
</div>

<div class="clearfix">
  <div class="grid-container2">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    </a>
    <h3>lorem ipsum</h3>
  </div>
  <div class="grid-container2">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    </a>
    <h3>lorem ipsum</h3>
  </div>
  <div class="grid-container2">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    </a>
    <h3>lorem ipsum</h3>
  </div>
  <div class="grid-container2">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    </a>
    <h3>lorem ipsum</h3>
  </div>
</div>

关键修复说明 #

• 使用box-sizing: border-box确保padding和border不会额外撑开容器宽度，保证布局计算准确。
• 给.grid-container1设置width:50%和float:left，实现顶部两张图片容器并排。
• 给.grid-container2设置width:25%和float:left，实现底部四张图片容器横向排列。
• 添加clearfix类清除浮动，解决容器高度塌陷问题。
• 清除h3的默认margin，避免不必要的间距影响布局。

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