將網格中具有不同高度的項目對齊，並使它們與對齊線匹配

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