如何在div集合中对齐图片与按钮？CSS小屏布局错位修复求助

看起来你是遇到了小屏设备上，因为容器内不同区块的文本量差异，导致元素（比如按钮）错位的问题对吧？这种情况在响应式布局里很常见，主要是因为默认块级元素的高度由内容决定，高度不一致就会破坏排列规整性。结合你的Jade和CSS代码，我给你几个实用的解决方案：

方案1：用Flexbox实现等高列（最推荐，自适应强） #

你的#marketing已经用了justify-content: space-between，只要再给父容器和列做一些flex设置，就能让所有列自动等高，按钮自然对齐。

修改你的CSS：

/* 把.row变成flex容器，实现列的等高和响应式换行 */
#marketing .row {
  display: flex;
  flex-wrap: wrap; /* 小屏自动换行，适配不同设备 */
  gap: 20px; /* 可选：给列之间加间距，排版更美观 */
}

/* 让每个列自适应宽度，同时保持最小可读性宽度 */
#marketing .3u {
  flex: 1 1 280px; /* flex-grow:1 允许列扩展，flex-shrink:1 允许收缩，flex-basis:280px 最小宽度 */
  display: flex;
  flex-direction: column; /* 让列内元素垂直排列 */
}

/* 让section填充列的剩余高度，把按钮推到底部 */
#marketing section {
  flex: 1;
}

另外，为了让按钮更规整，可以调整按钮的样式：

#marketing .button {
  margin-top: auto; /* 自动填充上方空间，固定在section底部 */
  display: block; /* 按钮占满列宽 */
  text-align: center;
}

这样调整后，不管每个区块的文本量多少，所有列都会和最高的列保持等高，按钮始终在同一水平线上，小屏也不会错位。

方案2：设置固定最小高度（适合简单场景） #

如果你暂时不想用flexbox，也可以给列设置一个足够容纳最长内容的最小高度，强制所有列高度一致：

#marketing .3u {
  min-height: 420px; /* 根据你的实际内容调整这个数值 */
}

不过这个方法不够灵活，如果后续内容更新，可能需要重新调整高度，不如flexbox自适应省心。

为什么之前会错位？ #

默认情况下，块级元素的高度是由内部内容撑开的。当某个区块的文本量少，它的高度就会比其他区块矮，在小屏设备上，列换行后，矮区块的下方元素就会“往上跑”，导致错位。用flexbox的等高布局可以从根本上解决这个问题，因为flex容器会自动让子元素的高度对齐。

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