行内CSS实现双等宽列时box-sizing设置未生效该如何解决？

问题原因 #

box-sizing: border-box 规则仅对设置该属性的元素本身生效，不会自动继承给子元素。你当前仅给父级.row添加了该属性，两个子级.column默认还是box-sizing: content-box模式，此时你设置的width: 50%仅代表内容宽度，再加上左右各10px的内边距，单个列的实际总宽度已经超过50%，两个列总宽度超过100%，因此第二个列会被挤到下一行。

解决方案 #

给两个.column的行内样式都加上box-sizing: border-box属性即可，同时可以给.row添加overflow: auto避免浮动元素导致父级高度塌陷。

修改后的完整代码如下：

<h2>Two Equal Columns</h2>

<div class="row" style="box-sizing: border-box;overflow: auto;">
  <div class="column" style="float: left;width: 50%;padding: 10px;height: 300px;box-sizing: border-box;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="float: left;width: 50%;padding: 10px;height: 300px;box-sizing: border-box;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者David Holly