Question

这个问题似乎已经在早些时候得到解决，但这些解决方案似乎都不适用于我。

我目前的情况：容器div设置为display:table-row 儿童设为display:table-cell

现在所有的孩子都有同样的身高。

我的问题：当窗口调整大小时，并非所有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必须和最长的兄弟姐妹一样长。

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

div与浮动相同的高度

1 个答案: