CSS |在行

Question

随意重新解释我的问题标题，我无法想到如何正确地说出来。

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

这些列都是动态的，在调整大小时它们会改变高度。如何让div与最高元素相匹配。

我正试图通过 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>

这显然已经被剥夺了基本要素，里程可能因您的设计和响应性而有所不同。