css - Css - 将一个浮动列调整为与另一列相同的高度

Question

阅读一些类似问题的答案，我仍然不清楚这是否可能。

考虑一个 clearfixed 容器内的 2 个浮动列的情况。Column1 的内容可以增长并确定容器的高度。Column2 的内容始终保证小于 Column1，但其高度应拉伸以填充容器。

究竟如何让 Column2 伸展？

这是 jsbin（Column2 不拉伸）

我不想做的事情

• 使用 javascript
• 绝对位置
• 使用表格 html

我可以用这些技术找出一些东西，但把它当作一种学术练习。我试图弄清楚 css 是否提供了一个“正确”的解决方案，我可以只提交内存并完成它。我怀疑答案可能是我尚未完全理解的以下技术之一。

• 使用表格 css 显示类型
• 整个 flexbox 即将推出
• 不管 twitter bootstrap 做什么

Answer 1

就像您怀疑的那样，只要您不需要支持 oldIE ，表格 CSS就可以工作：

section {
  width: 50%;
  display: table-cell;
  box-sizing: border-box;
  border: solid grey 1px;
}

Flexbox 也可以工作，但要注意当前在浏览器中实现的内容与当前草案所说的内容之间的显着差异。

我没有在愤怒中使用 Twitter 引导程序，所以我无法对此发表评论。