html - 与 FlexBox 等高(下一级)

Question

我想在列中创建等高元素。当我只有标题和价格时，这很容易。我可以灵活地增加标题，并且我的高度相同。

问题是当我也有描述时。
标题
价格
描述

有两个例子，因为我都试过了。
一个示例中所有内容都包含在一个元素中，另一个示例中内容被拆分为两个元素。

我有一个等高的 jQuery 脚本，但如果可能我想使用 Flex。
所有元素上都有颜色以查看它们是否具有相同的高度。

我在 codepen 上有我的代码，但我也会把它粘贴在这里。

* {
  box-sizing: border-box;
}

.container {
  background: tomato;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}
.container:not(:first-of-type) {
  margin-top: 40px;
}
.container ul {
  margin: unset;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.container ul li {
  display: flex;
  flex-direction: column;
  width: 32%;
  background: #fff;
  padding: .3em;
}
.container ul li h2 {
  margin: 0;
}

.container.one ul li a {
  background: lightgreen;
}
.container.one ul li a h2, .container.one ul li a p {
  background: pink;
}
.container.one ul li a span {
  background: lightblue;
}

.container.one .loop--item * {
  display: flex;
  flex-direction: column;
}
.container.one .loop--item--product-link {
  height: 100%;
}
.container.one .loop--item--product-link h2 {
  flex: 1;
}

.container.two .title-price {
  background: green;
}
.container.two .desc {
  background: blue;
}
.container.two ul li a {
  background: lightgreen;
}
.container.two ul li a h2, .container.two ul li a p {
  background: pink;
}
.container.two ul li a span {
  background: lightblue;
}

.container.two .loop--item--product-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.container.two .loop--item--product-link div.title-price {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.container.two .loop--item--product-link div.title-price h2 {
  flex: 1;
}
.container.two .loop--item--product-link div.desc {
  padding: 10px;
}

<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>

<!-- Container ONE -->
<div class="container one">
  <h1>Content in same box</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Overskrift</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift som er lidt længere</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift </h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
  </ul>
</div>

<!-- Container TWO -->
<div class="container two">
  <h1>Content in two boxes</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetit maiores!</p>
        </div>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Her er en overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
        </div>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Her er en overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad</p>
        </div>
      </a>
    </li>
  </ul>
</div>

Answer 1

正如 Paulie_D 所说，除非元素共享一个父元素，否则 CSS 中无法做到这一点。 然而，在现代浏览器中，您可以展平您的 DOM 树，并使用 display: contents 使一些元素消失。

使用这种方法的一个可能的解决方案(去掉 li 和 a)

* {
  box-sizing: border-box;
}

.container {
  background: tomato;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}

.container:not(:first-of-type) {
  margin-top: 40px;
}

.container ul {
  margin: unset;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  grid-gap: 10px;
}

.container ul li,
.container ul li a {
  display: contents;
}

.container ul li h2 {
  margin: 0;
}

.container.one ul li a h2 {
  grid-row: 1;
  background: pink;
}

.container.one ul li a p {
  grid-row: 3;
  background: pink;
}

.container.one ul li a span {
  grid-row: 2;
  background: lightblue;
}

<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>

<!-- Container ONE -->
<div class="container one">
  <h1>Content in same box</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Overskrift</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift som er lidt længere</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift </h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
  </ul>
</div>