gpt4 book ai didi

html - flex 盒/IE11 : flex-wrap: wrap does not wrap (Images + Codepen inside)

转载 作者:技术小花猫 更新时间:2023-10-29 11:43:12 35 4
gpt4 key购买 nike

我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。

我使用 flex-wrap: wrap; 它在 Firefox 和 Chrome 中完美运行:

Chrome, Firefox

但是 Internet Explorer 11(和 IE 10)不会打破这条线:

IE 11

代码笔示例

在此处查看代码:http://codepen.io/dash/pen/PqOJrG

HTML 代码

<div>
<ul>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li>
</ul>
</div>

CSS 代码

body {background: #000;}

div {
background: rgba(255, 255, 255, .06);
display: table;
padding: 15px;
margin: 50px auto 0;
}

ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
list-style: none;
padding: 0;
}

li {
background: purple;
margin: 4px;
}

img {
display: block;
height: 40px;
padding: 7px;
width: 40px;
}

这似乎是一个 IE 错误,当 flex 元素的父容器设置为 display: table; 时会出现。删除此行可解决问题。但是我需要 display: table; 来使父容器居中。

关于如何让 IE11 包装图像的任何想法?

最佳答案

尝试为父容器定义一个宽度,例如宽度:20%;。因此,容器将按照您的需要进行格式化,并且 flex-wrap 将起作用。是的,您可以删除 display: table;

关于html - flex 盒/IE11 : flex-wrap: wrap does not wrap (Images + Codepen inside),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31022747/

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