如何实现等高列？响应式模式下图片与Div高度不等问题求助

我明白你遇到的问题了——在响应式布局下，Bootstrap 3的两列因为内容高度不同，导致图片列和右侧内容列高度不匹配，视觉上很不协调。下面给你几种实用的解决办法，都能完美实现等高列效果：

方法1：使用Flexbox布局（推荐，现代浏览器支持） #

Flexbox是实现等高布局最简洁的方式，我们只需要给包含列的.row添加自定义的flex样式，就能让所有子列自动等高：

修改后的CSS代码 #

.img-responsive { width: 100%; } 
.content div[class^=col] { padding: 0; } 
/* 添加Flex等高样式 */
.content .row {
  display: flex;
  flex-wrap: wrap; /* 保证响应式下能换行 */
  border: 1px solid #333; 
  margin: 0; 
  text-align: left; 
}
.content .row > div[class^=col] {
  flex: 1; /* 让列平分宽度，同时自动等高 */
}
.content div[class^=col]:nth-child(2) { 
  text-align: center; 
  margin: 50px 0; 
  padding: 0 20px; /* 给内容列加内边距，避免贴边 */
} 
.main-tag { color: #fb6e6a; letter-spacing: 0.8px; } 
.content header .main-tag .fa { color: #fb6e6a; } 
.content div[class^=col]:nth-child(2) h3 { font-size: 1.5em; font-weight: 600; font-family: 'Ubuntu', sans-serif; } 
.content .vr-line { border-color: #333; } 
.content .fa { color: #333; } 
.content footer p { margin-top: 50px; } 
.content footer p .fa { font-size: 1.3em; padding-right: 0.5em; line-height: 1px; }

这个方法的好处是代码简洁，而且能自适应各种内容高度，同时支持响应式换行，现代浏览器（IE10+）都能很好兼容。

方法2：使用表格布局（兼容旧浏览器） #

如果需要兼容IE9及以下浏览器，表格布局是个可靠的选择：

修改后的CSS代码 #

.img-responsive { width: 100%; } 
.content div[class^=col] { padding: 0; } 
/* 表格布局样式 */
.content .row {
  display: table;
  width: 100%;
  border: 1px solid #333; 
  margin: 0; 
  text-align: left; 
}
.content .row > div[class^=col] {
  display: table-cell;
  float: none; /* 取消Bootstrap默认的浮动 */
  vertical-align: top; /* 内容顶部对齐 */
}
.content div[class^=col]:nth-child(2) { 
  text-align: center; 
  margin: 50px 0; 
  padding: 0 20px;
} 
.main-tag { color: #fb6e6a; letter-spacing: 0.8px; } 
.content header .main-tag .fa { color: #fb6e6a; } 
.content div[class^=col]:nth-child(2) h3 { font-size: 1.5em; font-weight: 600; font-family: 'Ubuntu', sans-serif; } 
.content .vr-line { border-color: #333; } 
.content .fa { color: #333; } 
.content footer p { margin-top: 50px; } 
.content footer p .fa { font-size: 1.3em; padding-right: 0.5em; line-height: 1px; }

表格布局的原理是让行变成表格，列变成单元格，单元格天然就是等高的，完美适配旧浏览器。

方法3：使用负边距技巧（传统兼容方案） #

这是一种不需要依赖现代布局属性的老技巧，通过超大内边距和负边距来“欺骗”浏览器实现等高：

修改后的CSS代码 #

.img-responsive { width: 100%; } 
.content div[class^=col] { padding: 0; } 
/* 负边距等高样式 */
.content .row {
  overflow: hidden; /* 隐藏超出的部分 */
  border: 1px solid #333; 
  margin: 0; 
  text-align: left; 
}
.content .row > div[class^=col] {
  padding-bottom: 9999px; /* 超大内边距 */
  margin-bottom: -9999px; /* 负边距抵消 */
  float: left; /* 保持浮动 */
}
.content div[class^=col]:nth-child(2) { 
  text-align: center; 
  margin: 50px 0; 
  padding: 0 20px 9999px; /* 调整内边距 */
} 
.main-tag { color: #fb6e6a; letter-spacing: 0.8px; } 
.content header .main-tag .fa { color: #fb6e6a; } 
.content div[class^=col]:nth-child(2) h3 { font-size: 1.5em; font-weight: 600; font-family: 'Ubuntu', sans-serif; } 
.content .vr-line { border-color: #333; } 
.content .fa { color: #333; } 
.content footer p { margin-top: 50px; } 
.content footer p .fa { font-size: 1.3em; padding-right: 0.5em; line-height: 1px; }

这个方法兼容性极佳，几乎支持所有浏览器，但需要注意如果列内有背景色，要确保背景能覆盖整个高度，不过你的例子里图片列是满宽图片，所以完全没问题。

你可以根据自己的浏览器兼容需求选择其中一种方法，测试后就能看到两列完美等高的效果了！

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