CSS column-count布局两列内容未对齐问题求助

嘿，我懂你碰到的这个列对齐糟心事了——用CSS column-count 做布局时，这种元素错位的情况真的很常见，尤其是当你放的是高度不一的独立组件时。咱们来一步步搞定它！

问题根源 #

你现在用的CSS多列布局（column-count）本质是为流式文本设计的（比如报纸排版），它会自动把内容拆分到不同列里，但如果你的子元素（这里是<figure>）高度不一样，就会出现不对齐的情况。而且你的CSS里还有个小错误：.quick-links h1 选择器根本找不到<h1>，因为<h1>是在.quicklinks section里，不是.quick-links div的子元素哦。

推荐解决方案：用Flexbox代替Columns（更适合卡片式布局） #

Flexbox专门为这种需要对齐的组件布局而生，能轻松让两列内容整齐排列。修改你的CSS如下：

/* 先修正标题样式 */
.quicklinks h1 {
  margin-bottom: 1.5rem;
  text-align: center; /* 可选，让标题更美观 */
}

/* 用Flexbox实现两列布局 */
.quick-links {
  display: flex;
  justify-content: space-around; /* 让两个卡片均匀分布 */
  gap: 2rem; /* 卡片之间的间距，可按需调整 */
}

/* 确保每个卡片内部内容居中 */
.quick-links figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0; /* 清除默认margin，避免间距混乱 */
}

.quick-links img {
  height: 7.5em;
  width: 7.5em;
  border-radius: 10em;
}

/* 响应式适配：小屏幕下自动换行 */
@media (max-width: 600px) {
  .quick-links {
    flex-direction: column;
    align-items: center;
  }
}

如果你坚持要用Columns布局 #

如果一定要用多列布局，需要确保每个<figure>不会被拆分到两列，并且高度一致：

.quicklinks h1 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.quick-links {
  column-count: 2;
  column-gap: 2rem;
}

.quick-links figure {
  break-inside: avoid; /* 禁止单个卡片被拆分到两列 */
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%; /* 强制所有卡片高度一致 */
}

.quick-links img {
  height: 7.5em;
  width: 7.5em;
  border-radius: 10em;
}

额外小提示 #

确保每个<figure>里的内容结构完全一致（比如图片大小、文本长度），这样不管用哪种布局，对齐效果都会更完美～

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