将网格中具有不同高度的项目对齐,并使它们与对齐线匹配

Question

我想创建一个页面,其中我的元素显示在网格中.我想逐行对齐项目.我想在视觉上实现以下结果,但我不知道如何:https://codepen.io/shirkit/pen/KvZKOE/

我现在有这个:

var back = ["red","blue","gray","black","green","cyan","brown","magenta"];
var i = 0;

$('#container .card').children().each(function() {
 $(this).css('background-color',back[i++]);
 if (i == back.length) i = 0;
});

#container {
 display: flex;
 flex-direction: row;
}

.card {
 max-width: 200px;
  width: 100%;
}

.card .image {
 height: 150px;
}

.card .text {
 height: 100px;
}

.card .list {
 height: 50px;
}

#z1 .image {
  height: 175px;
}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
 <div id="z1" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
 <div id="z2" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
 <div id="z3" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
</div>

澄清:ID选择器的高度#z1 .image, #z2.text #z3 .list仅用于模拟组件的高度.因此,不能选择更改这些值.另请注意,这些元素/容器的高度值不是预先知道的,因此设置边距也不是一种选择.

显示的当前代码不是它当前的样式,它只是用于显示目前的外观,但它应该遵循该结构,一个container用于所有内容,一个card用于元素和卡内的项目.

现在我知道如果我不将这些项放在.card元素中,然后使用CSS display: grid中,该怎么做#container.我会把这些元素.image/.text/.list作为直接的孩子#container,但这是最后的手段,我想要一个替代方案.

我目前正在寻找一种解决方案,允许我保留.card元素,并有可能的后备.

编辑:标记为重复的建议答案不能解决我在此处提出的问题,或者我没有找到任何其他相关的问题.

Answer 1

根据您当前的 HTML 结构，我不熟悉任何实现最终结果的纯 CSS 方法。关键问题是每个相邻列中的各个元素无法将其自身与周围环境联系起来。如果你的单元格是水平的，我们也许可以使用 CSS table-row - 因为“单元格是行的后代，而不是列”。（W3）

话虽如此，您没有提到您正在寻找纯 CSS 解决方案，并且由于您已经在使用 jQuery，我认为这将是一个很好的解决方案，可以在实现所需布局的同时保持 HTML 结构。

在下面的代码中，我迭代每组组件（图像、文本、列表）以确定哪张卡具有最高的组件，然后使用每个margin-bottom较短的组件来间隔其他卡以使它们相等。

var back = ["red", "blue", "gray", "black", "green", "cyan", "brown", "magenta"];
var i = 0;

$('#container .card').children().each(function() {
  $(this).css('background-color', back[i++]);
  if (i == back.length) i = 0;
});

var components = ['image', 'text', 'list'];
$.each(components, function(i, j) {
  var $elements = $('.card .' + j);
  var heights = [];
  var tallest = 0;

  $elements.each(function(i) {
    var height = $(this).height();
    heights[i] = height;
    if (height > tallest) {
      tallest = height;
    }
  });

  $.each(heights, function(i, j) {
    var diff = tallest - j;
    if (diff) {
      $elements.eq(i).css('margin-bottom', diff);
    }
  });
});

#container {
  display: flex;
}

.card {
  max-width: 200px;
  width: 100%;
}

.card .image {
  height: 150px;
}

.card .text {
  height: 100px;
}

.card .list {
  height: 50px;
}

#z1 .image {
  height: 175px;
}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="z1" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
  <div id="z2" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
  <div id="z3" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
</div>