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.

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

对于那些对浏览器支持感到疑惑的人,所有主流浏览器都支持它.