如何不使用表格实现等宽等高的响应式4列布局及图片响应式？

嘿，我来帮你解决这个4列等宽等高响应式布局的问题！你已经搞定了宽度适配，剩下的高度统一和图片响应式其实用CSS Flexbox或者Grid就能轻松解决，这俩是现在做响应式布局的首选方案，我给你详细讲讲：

方法一：用Flexbox实现（兼容性更好） #

Flexbox天生就支持等高的列布局，而且实现起来很简单。咱们直接看完整代码：

<div class="container">
  <div class="header">
    <h1>Hello There</h1>
  </div>
  <div class="search">
    <input class="search-box" placeholder="Search..." />
  </div>
  <!-- 4列布局部分 -->
  <div class="columns-container">
    <div class="column">
      <img src="your-image-url.jpg" alt="列内图片">
      <p>这里是列内的文本内容，不管内容多少，列都会保持等高</p>
    </div>
    <div class="column">
      <img src="your-image-url.jpg" alt="列内图片">
      <p>短文本</p>
    </div>
    <div class="column">
      <img src="your-image-url.jpg" alt="列内图片">
      <p>这里是更长的文本内容，用来测试等高效果，不管内容长度如何，所有列的高度都会和最高的那列保持一致</p>
    </div>
    <div class="column">
      <img src="your-image-url.jpg" alt="列内图片">
      <p>中等长度的文本</p>
    </div>
  </div>
</div>

对应的CSS：

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.search {
  margin-bottom: 30px;
}

.search-box {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 关键的Flexbox布局 */
.columns-container {
  display: flex;
  flex-wrap: wrap; /* 屏幕变窄时自动换行 */
  gap: 20px; /* 列之间的间隙，比margin更方便 */
}

.column {
  flex: 1 0 22%; /* 核心：flex-grow:1（剩余空间分配），flex-shrink:0（不缩小），flex-basis:22%（基础宽度），这样桌面端刚好4列 */
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

/* 响应式图片 */
.column img {
  max-width: 100%; /* 图片宽度不超过容器 */
  height: auto; /* 保持图片比例 */
  margin-bottom: 10px;
  border-radius: 4px;
}

/* 移动端适配：屏幕小于768px时变成2列 */
@media (max-width: 768px) {
  .column {
    flex: 1 0 45%;
  }
}

/* 超小屏幕变成单列 */
@media (max-width: 480px) {
  .column {
    flex: 1 0 100%;
  }
}

关键点解释： #

• display: flex 让容器内的列变成Flex项目，默认align-items: stretch，所以所有列会自动和最高的列保持等高，完美解决你的高度统一问题！
• flex: 1 0 22% 控制列的宽度，22%的基础宽度加上20px的gap，刚好在桌面端放下4列；flex-grow:1 保证列会平分剩余空间，实现等宽。
• 图片的max-width:100%; height:auto 确保图片自适应容器宽度，不会溢出，同时保持原有比例，实现响应式。

方法二：用CSS Grid实现（更简洁） #

Grid布局是专门为二维布局设计的，代码更简洁，尤其适合这种多列布局：

CSS部分替换成下面的就行，HTML结构和上面一样：

/* 关键的Grid布局 */
.columns-container {
  display: grid;
  /* auto-fit自动适配列数，minmax(250px, 1fr)表示列最小宽度250px，超过的话平分空间 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* 列和行的间隙 */
}

.column {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

/* 响应式图片和之前一样 */
.column img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 4px;
}

关键点解释： #

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是Grid的精髓：自动根据屏幕宽度调整列数，当屏幕足够宽时显示4列，变窄时自动减少列数（比如2列、1列），而且所有列宽度自动相等。
• Grid布局下，同一行的列默认就是等高的，不需要额外设置，直接解决高度统一问题。

你可以根据自己的需求选择其中一种方法，Flexbox兼容性更好（支持到IE10），Grid更简洁现代（支持到IE11，但某些属性有限制）。两种方法都能完美解决你的问题，试试吧！

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