主页 / coding / 问题 / 78935431
Accepted
Meek
Asked: 2024-08-31 22:55:01 +0800 CST

如何使垂直堆叠的框列中的元素高度相等（与最高点相同的高度）[重复]

  • 772

我有一个具有动态高度的垂直堆叠框列表。我希望每个框的高度都与其中最高的一样高。如何使用显示网格来实现这一点？

这是我所拥有的 - 我希望框 1 始终与框 2 一样高 - 反之亦然：

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
<div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>
编辑：我不是在寻找均匀分布高度的解决方案。谢谢 :-)

css

1 个回答

  1. Best Answer

    添加grid-auto-rows: 1fr

    .container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
    <div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>

    • 2

相关问题