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

【问题标题】：CSS | Match dynamic div heights inside rowCSS |匹配行内的动态 div 高度
【发布时间】：2016-01-18 13:50:10
【问题描述】：

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

有一些与 CSS 相关的问题。我有一个行元素（不要与引导程序混淆，这是单独的）。在这里面我有两列。

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

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

下面是我的真实示例，我需要第一列（行 in 的那一列）来匹配行中包含的表单 div 的高度

【问题讨论】：

如何将white-space:nowrap 分配给容器div 并将display:inline-block 分配给子div？
@Litestone 刚刚尝试了您的建议，这与示例中的相同
您是否尝试将height 属性设置为100%？
@Litestone 是的，我试过了

标签： html css alignment multiple-columns

【解决方案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>

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

【讨论】：