在代表行的 div 中包含的 div 内垂直对齐答案

【问题标题】：vertical align inside divs contained in a div that represents a row在代表行的 div 中包含的 div 内垂直对齐
【发布时间】：2016-10-13 17:59:17
【问题描述】：

我已经尝试了几乎所有我能找到的垂直对齐 div 技巧，但仍然没有得到结果。这是在已建立的响应式框架内，因此我将其剥离为一些内联 CSS 以显示问题。

<div class="row uniform">
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

理想情况下，框 2,3 和 4 与框 1 的高度相同，并且所有框中的文本在中间垂直对齐。

row.uniform 设置一些边距、内边距和基线的默认垂直对齐，但这在这里没有任何影响。

【问题讨论】：

标签： css

【解决方案1】：

请注意，我在所有 div 上删除了您的 float: left;。

.row {
  display: table;
  width: 100%;
}
.row div {
  display: table-cell;
  float: none;
  vertical-align: top;
}

<div class="row uniform">
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

对于那些想知道浏览器支持的人，it is supported on all major browsers。

【讨论】：

感谢@DineiRockenbach！正确顺序的神奇组合起到了作用。

【解决方案2】：

最简单的解决方案，更多详细信息请参阅 css flexbox

如果您想使内容居中对齐，请参阅demo

.row {
  display: flex;
}
.row div{
  flex: 1
}

<div class="row">
  <div style="background:#CCC;">
    box 1<br />
    line 2
  </div>
  <div style="background:#a43c69;">
    box 2
  </div>
  <div style="background:#CCC;">
    box 3
  </div>
  <div style="background:#a43c69;">
    box 4
  </div>
</div>

【讨论】：