html - float 布局中的 CSS 缩放 div

Question

我想创建一个不使用高度属性的自动缩放布局。如图所示，我在两个 div 之间使用 float 布局。中间的盒子有不同大小的内容，我希望盒子以这种方式缩放，所有盒子都具有相同的高度。

Answer 1

尝试 reading this css-tricks 上的文章。

我最喜欢的选择可能是来自 Paul Irish 的博客 HTML5Rocks。 - 但是它确实依赖于现代浏览器。我创建了一个 JSFiddle基于他的代码:

CSS

.box {
  /* basic styling */
  width: 100%;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;
  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: -moz-box;
  -moz-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

/* our colors */
.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }

HTML

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

但是请注意这不适用于旧版浏览器，如果您的目标是这些浏览器，我建议您只采用表格布局。