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

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元素中，然后在#container使用CSS display: grid ，我知道如何做到这一点。 我会将元素.image/.text/.list作为来自#container直接孩子，但这是最后的选择，我想要一个替代方案。

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

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

Answer 1

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

Answer 2

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

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

#z2  .image {
 height: 150px;
 max-height: 175px;
 margin-bottom:25px;
}
#z3  .image {
 height: 150px;
 max-height: 175px;
 margin-bottom:25px;
}
#z1 .text {
 height: 100px;
 margin-bottom:20px;
}
#z3 .text {
 height: 100px;
 margin-bottom:20px;
}
.card .list {
 height: 50px;
}

#z1 .image {
  height: 175px;
}
#z2 .image{

}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

这是您所需输出的CSS。 但你应该使用它推荐的jquery你想要纯粹的css就是这样。

Answer 3

而不是下面的代码

<style type="text/css">
#z1 .image {
  height: 175px; 
}
#z2 .text {
  height: 120px;
}
#z3 .list {
  height: 60px;
}
</style>

使用此代码

<style type="text/css">
#z1 .image {
  height: auto; 
}
#z2 .text {
  height: auto;
}
#z3 .list {
  height: auto;
}
</style>

Answer 4

使用砖石布局，例如https://masonry.desandro.com/ 。 它将通过一些JS帮助实现下面的布局。 使用纯CSS可能无法实现完全跨浏览器的解决方案，特别是如果您尝试使用flexbox