html - div 与 float 相同的高度

Question

似乎这个问题之前已经解决了，但似乎没有一个解决方案对我有用。

我的现状: 容器 div 设置为 display:table-row 子项设置为 display:table-cell

现在所有 child 的高度都一样了，正如我所希望的那样。

我的问题: 调整窗口大小时，并非所有 div 都可见。我怎样才能确保 div 始终可见。示例:

调整进度:

DIV#1 ---- DIV#2 ---- DIV#3 ---- DIV#4 ---- DIV#5



DIV#1 ---- DIV#2 ---- DIV#3 ---- DIV#4 
DIV#5


DIV#1 ---- DIV#2 ---- DIV#3
DIV#4 ---- DIV#5

http://jsfiddle.net/9BC53/2/

我希望这可以在不使用 JavaScript 的情况下解决

编辑 我不想指定任何高度。 div 必须与最长的 sibling 一样长。

Answer 1

不需要使用display: table-row 或display: table-cell。

CSS

div#main {
    display: inline-block;
    /* to clear float */
    overflow: hidden;
}
div.elem {
    float: left;
    background:#ff0000;
    /* same height as intented */
    text-align: center;
    width: 80px;
}
div.elem div {
    width:40px;
}
div#one div {
    background:#111;
}
div#two div {
    background:#444;
}
div#three div {
    background:#777;
}
div#four div {
    background:#aaa;
}
div#five div {
    background:#ddd;
}

Javascript:

var main = document.getElementById('main');
var height = main.offsetHeight + "px";
var children = main.children;
for (var i = 0; i < children.length; i++) {
    var c = children[i];
    c.style.height = height;
}

Working Fiddle