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

Css-将一个浮动列的大小调整为与另一个相同的高度,css,responsive-design,fluid-layout,multiple-columns,Css,Responsive Design,Fluid Layout,Multiple Columns,通过阅读类似问题的一些答案,我仍然不清楚这是否可能 考虑在一个干净的容器内有两个浮动柱的情况。Column1的内容可以增长并决定容器的高度。第2列的内容始终保证小于第1列,但其高度应伸展以填充容器 到底怎样才能让Column2伸展呢 我不想做的事 使用javascript 绝对位置 使用表格html 我可以用这些技巧找出一些东西,但把它看作是一个学术性的练习。我试图弄清楚css是否提供了一个“正确”的解决方案,我只需将它提交到内存中即可。我怀疑答案可能是我还没有完全理解的以下技术之一 使

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

考虑在一个干净的容器内有两个浮动柱的情况。Column1的内容可以增长并决定容器的高度。第2列的内容始终保证小于第1列,但其高度应伸展以填充容器

到底怎样才能让Column2伸展呢

我不想做的事

  • 使用javascript
  • 绝对位置
  • 使用表格html
我可以用这些技巧找出一些东西,但把它看作是一个学术性的练习。我试图弄清楚css是否提供了一个“正确”的解决方案,我只需将它提交到内存中即可。我怀疑答案可能是我还没有完全理解的以下技术之一

  • 使用表格css显示类型
  • 整个flexbox的东西很快就要出来了
  • 无论twitter引导程序做什么

正如您所怀疑的,只要您不需要支持oldIE,表CSS:

section {
  width: 50%;
  display: table-cell;
  box-sizing: border-box;
  border: solid grey 1px;
}
Flexbox也可以正常工作,但要注意浏览器和浏览器之间的显著差异


我没有愤怒地使用Twitter引导,因此我无法对此发表评论。

正如您所怀疑的,只要您不需要支持oldIE:

section {
  width: 50%;
  display: table-cell;
  box-sizing: border-box;
  border: solid grey 1px;
}
Flexbox也可以正常工作,但要注意浏览器和浏览器之间的显著差异


我没有愤怒地使用推特引导,所以我无法对此发表评论。

啊……但是没有浮动……我明白了。@GeorgeMauer这里有几个关于
display:table
:哦,太棒了,谢谢。我试过阅读它的规格,但无法克服这样一个事实——讽刺的是——它的布局太难看了。啊……但是没有浮动……我明白了。@GeorgeMauer这里有几个关于
display:table
:哦,太棒了,谢谢。我已经试着阅读了它的规格,但无法克服的事实,讽刺的是,布局是如此丑陋。