CSS |匹配行内的动态 div 高度

Question

请随意改写我的问题标题，我想不出如何正确措辞。

有一些 CSS 相关 issues.I 有一个行元素（不要与 bootstrap 混淆，这是分开的）。在这里面我有两列。

这些列都是动态的，因为在调整大小时它们会改变高度。我怎样才能让 divs 匹配最高的元素。

我正在尝试使用 Pure CSS 找到一种方法来做到这一点。希望下图能更多地解释我的理论

下面是我的真实示例，我需要第一列（带有行的那一列）匹配表格的高度 div 都包含在行

中

Answer 1

两种选择：

CSS 表

.row {
  display: table;
  width: 500px; /* for demo */
  background-color: #eee;
  border-spacing: 5px;
}

.col {
  display: table-cell;
  vertical-align: top;
  padding: 5px;
  border: 1px solid red;
}

.col1 {
  width: 100px;
}

<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

并使用 CSS Flexbox

.row {
  display: flex;
  align-items: stretch;
  width: 500px;
}

.col {
  margin: 5px;
  padding: 5px;
  border: 1px solid red;
}

<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

这显然是精简到最基本的要素，实际情况可能因您的设计及其响应能力而异。

CSS |匹配行内的动态 div 高度

CSS | Match dynamic div heights inside row

html

css

alignment

multiple-columns