使用 CSS 设置具有相同类名的独立 div 的相同高度

Question

我想设置具有相同类名(即"description"、"features"、"rules"(的独立div的相同高度，并且高度应该是具有最大内容的w.r.tdiv。注意：内容是动态的，HTML结构必须与下面相同。

.products {
display: inline-flex;
width: 300px;     
}
.products .product {
width: 50%;
border: 1px solid black;
}
.products .product div {
border-bottom: 1px solid black;
}

<div class="products">
<div class="product">
<div class="description">product 1 description description description description description</div>
<div class="features">product 1 features</div>
<div class="rules">product 1 rules rules rules rules rules rules rules rules</div>
</div>
<div class="product">
<div class="description">product 2 description</div>
<div class="features">product 1 features features features features features</div>
<div class="rules">product 1 rules</div>
</div>
</div>

只寻找CSS解决方案

Answer 1

考虑使用网格布局https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

查看下面使用嵌套网格布局对齐行的示例。

.products {
display: grid;
grid-template-columns: 1fr 1fr;
border: 3px solid blue;
}
.products .product {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
border: 3px solid green;
}
.product .description {
grid-column: 1;
grid-row: 1;
border-bottom: 1px solid yellow;
}
.product .features {
grid-column: 1;
grid-row: 2;
border-bottom: 1px solid red;
}
.product .rules{
grid-column: 1;
grid-row: 3;
}

<div class="products">
<div class="product">
<div class="description">product 1 description description description description description</div>
<div class="features">product 1 features</div>
<div class="rules">product 1 rules rules rules rules rules rules rules rules</div>
</div>
<div class="product">
<div class="description">product 2 description</div>
<div class="features">product 2 features features features features features</div>
<div class="rules">product 2 rules</div>
</div>
</div>

如果你不想嵌套网格，另一个好资源https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#html

Answer 2

对于您的情况，我更喜欢使用HTML表：

.products {
border: 1px solid black;
border-collapse: collapse;
}
table td {
width: 50%;
border: 1px solid black;
}

<table class="products">
<tr>
<td>product 1 description description description description description</td>
<td>product 2 description</td>
</tr>
<tr>
<td>product 1 features</td>
<td>product 1 features features features features features</td>
</tr>
<tr>
<td>product 1 rules rules rules rules rules rules rules rules</td>
<td>product 1 rules</td>
</tr>
</table>

也许它与HTML相去甚远，但它可能是一个答案。