我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。
我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。
代码
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
grid-template-rows: 1fr 1fr 1fr 1fr 30px;
display: grid;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}<div class="Grid">
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. …我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.
我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.
这有可能吗？
我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …