移动端信息卡片大小不一致问题及CSS修复方案咨询

问题分析 #

你的卡片在移动端出现大小不一致的核心原因：

• .column 未设置flex属性，同一行内的列高度随内容自动调整，导致卡片高度不统一
• .card 没有强制撑满容器高度，内容少的卡片会更短
• 分散的多个.row容器，让卡片的排列逻辑不统一

解决步骤 #

• 给.column添加flex属性，确保每个列在同一行占比一致且高度自动匹配最高列
• 将.card设为flex容器，让内部元素垂直分布，同时设置height: 100%撑满父容器
• 把所有卡片合并到一个.row容器，让flex布局统一管理排列
• 用clamp()适配字体大小，避免内容换行差异导致高度变化

修改后的代码 #

CSS部分 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em; /* 用gap替代column的padding，布局更整洁 */
  padding: 0 1em;
}
.row h1 {
  width: 100%;
  text-align: center;
  font-size: clamp(2em, 5vw, 3.75em); /* 适配不同屏幕的字体大小 */
  margin: 0.6em 0;
  font-weight: 600;
  color: #c49d12;
}
.column {
  flex: 1 1 100%; /* 移动端占满整行，自动匹配高度 */
  min-width: 280px; /* 避免卡片过窄 */
}
.card {
  height: 100%; /* 撑满父容器高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 内部元素垂直分布，底部对齐 */
  padding: 3.1em 1.25em;
  text-align: center;
  background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
  background-repeat: no-repeat;
  background-position: 0 0.62em;
  box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
  border-radius: 0.5em;
  transition: 0.5s;
  cursor: pointer;
}
.card .icon {
  font-size: 2.5em;
  height: 2em;
  width: 2em;
  margin: 0 auto 1em; /* 统一图标和标题的间距 */
  background-color: #c49d12;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  position: relative; /* 给伪元素提供定位参考 */
}
.icon:before {
  position: absolute;
  content: "";
  height: 1.5em;
  width: 1.5em;
  border: 0.12em solid #5d4b0b;
  border-radius: 50%;
  transition: 0.5s;
}
.card h3 {
  font-size: clamp(1.1em, 3vw, 1.3em);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #cda928;
  margin-bottom: 1.4em;
}
.card p {
  line-height: 2em;
  color: #625a71;
}
.card:hover {
  background-position: 0;
}
.card:hover .icon:before {
  height: 2.25em;
  width: 2.25em;
}
@media screen and (min-width: 768px) {
  .column {
    flex: 1 1 33.33%; /* 平板端一行3个卡片 */
  }
  section {
    padding: 1em 2em;
  }
}
@media screen and (min-width: 992px) {
  .column {
    flex: 1 1 25%; /* 桌面端一行4个卡片 */
    max-width: 25%;
  }
  .card {
    padding: 5em 2em;
  }
  section {
    padding: 1em;
  }
}

HTML部分 #

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

<section>
  <div class="row">
    <h1>Características</h1>
    <!-- Column One -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-user-friends"></i>
        </div>
        <h3>Capacidad</h3>
        <p>De 500 hasta 1,000 personas.</p>
      </div>
    </div>
    <!-- Column Two -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-couch"></i>
        </div>
        <h3>Mobiliario</h3>
        <p>Mobiliario incluido.</p>
      </div>
    </div>
    <!-- Column Three -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-glass-cheers"></i>
        </div>
        <h3>Bebidas</h3>
        <p>Refrescos y café</p>
      </div>
    </div>
    <!-- Column Four -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-money-bill-wave-alt"></i>
        </div>
        <h3>Apartado</h3>
        <p>Apartado con $15,000.</p>
      </div>
    </div>
    <!-- Column Five -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-utensils"></i>                                    
        </div>
        <h3>Mantelería</h3>
        <p>Mantelería, cubertería y vajilla.</p>
      </div>
    </div>
    <!-- Column Six -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-wine-bottle"></i>
        </div>
        <h3>Alcohol</h3>
        <p>Descorche libre.</p>
      </div>
    </div>
    <!-- Column Seven -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-money-bill"></i>
        </div>
        <h3>Liquidación</h3>
        <p>Liquidar 20 días antes del evento</p>
      </div>
    </div>
    <!-- Column Eight -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-lightbulb"></i>
        </div>
        <h3>Iluminación</h3>
        <p>Videos musicales,iluminación y robótica.</p>
      </div>
    </div>
    <!-- Column Nine -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-user-check"></i>
        </div>
        <h3>Personal</h3>
        <p>Mesero, personal y maestro de ceremonias.</p>
      </div>
    </div>
    <!-- Column Ten -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-comments-dollar"></i>
        </div>
        <h3>Mensualidades.</h3>
        <p>Manejamos los mejores precios a mensualidades.</p>
      </div>
    </div>
    <!-- Column Eleven -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fab fa-black-tie"></i>
        </div>
        <h3>Entretenimiento</h3>
        <p>DJ y batucada.</p>
      </div>
    </div>
    <!-- Column Twelve -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-fan"></i>
        </div>
        <h3>Florería</h3>
        <p>Centro de flores</p>
      </div>
    </div>
    <!-- Column Thirteen -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-user-clock"></i>
        </div>
        <h3>Servicio.</h3>
        <p>Servicio hasta por 5hrs.</p>
      </div>
    </div>
    <!-- Column Fourteen -->
    <div class="column">
      <div class="card">
        <div class="icon">
          <i class="fas fa-cloud-meatball"></i>
        </div>
        <h3>Menú</h3>
        <p>Menú a 3 tiempos</p>
      </div>
    </div>
  </div>
</section>

关键修改说明 #

1. 合并所有卡片到单个.row容器，让flex统一管理排列，避免多容器导致的布局混乱
2. .column设置flex: 1 1 100%，移动端自动占满整行，平板/桌面端按比例分配宽度，min-width保证卡片可读性
3. .card设置height: 100%和垂直flex布局，强制所有卡片高度一致，内部元素自动适配空间
4. 使用clamp()实现字体的响应式适配，减少不同屏幕下的内容换行差异

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