div中包含的div表示一行

Question

我已经尝试了几乎所有垂直对齐的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设置了一些边距，填充和基线的默认垂直对齐，但这并没有影响到这里。

Answer 1

请注意，我已删除了float: left;上的div。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

对于那些对浏览器支持感到疑惑的人，it is supported on all major browsers。

Answer 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>