CSS缩放div浮动布局 [英] CSS scale divs in float layout

问题描述

我想要创建一个自动缩放布局，而不使用height属性。我在两个div之间使用浮动布局，如图所示。

I want to create an automatic scaling layout without using the height property. I use a float layout between two divs, as shown in the image. The boxes in the middle have content of different size and I want the boxes to scale in such way, that all have the same height.

推荐答案

尝试在css-tricks阅读这篇文章。

Try reading this article at css-tricks.

我最喜欢的选择可能是从保罗爱尔兰的博客 HTML5Rocks a> - 然而它依靠现代浏览器。我已根据其代码创建了 JSFiddle ：

My favorite choice is probably the one taken from Paul Irish's blog at HTML5Rocks - however it does rely on modern browsers. I've created a JSFiddle based on his code:

CSS

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>

但注意，这将不适用于旧版浏览器， 针对这些，我建议你只是采取表格布局。

However note this won't work with legacy browsers, and if you're targeting those, I suggest you just adopt a table layout.

这篇关于CSS缩放div浮动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！