时间戳

首页 > 解决方案 > 使用 CSS 设置具有相同类名的独立 div 的相同高度

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

问题描述

我想为具有相同类名（即“描述”、“功能”、“规则”）的独立 div 设置相同的高度，并且高度应该是具有最大内容的 div。注意：内容是动态的，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 解决方案！

标签： htmlcss

解决方案

对于您的情况，我更喜欢使用 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 相去甚远，但它可能是一个答案。

推荐阅读