gpt4 book ai didi

html - 内部显示 flex 和自动高度 (100%)

转载 作者:太空宇宙 更新时间:2023-11-04 13:10:55 25 4
gpt4 key购买 nike

我正在尝试做 flex 网格,但我想使任何列都具有相同的高度。

它适用于 IE 和 Firefox,但不适用于 Chrome 和 Opera。

http://jsfiddle.net/micchaleq/Nz6fC/

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
#test{ display: flex; border: 1px solid blue; list-style: none; padding: 0; margin: 0; }
#test li{display: inline-block; height: auto; border: 1px solid orange; font-size: 30px; padding: 50px;}
.blue{ background: blue; height: 100%; }
.red{background: red; height: 100%;}
.green{background: green; height: 100%;}
</style>
</head>
<body>
<ul id="test">
<li><div class="blue">test<br/>test</div></li>
<li><div class="red">test<br/><br/><br/>test</div></li>
<li><div class="green">test<br/><br/>test</div> </li>
</ul>
</body>
</html>

没有JS可以吗?任何人都可以告诉我我的问题在哪里

最佳答案

将您的列表项设置为

显示: flex ;

#test li{
display: flex;
height: auto;
border: 1px solid orange;
font-size: 30px;
padding: 50px;
}

并移除.blue、red和green选择器的高度

.blue { 
background: blue;
}

.red {
background: red;
}

.green {
background: green;
}

这里的例子:

http://jsfiddle.net/m4e3f/

关于html - 内部显示 flex 和自动高度 (100%),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24701109/

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