gpt4 book ai didi

html - div 与 float 相同的高度

转载 作者:行者123 更新时间:2023-11-28 17:35:32 25 4
gpt4 key购买 nike

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

我的现状:容器 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 一样长。

最佳答案

不需要使用display: table-rowdisplay: 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

关于html - div 与 float 相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25158859/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com