如何在 html 的弹性框中填充空格
[英]how to fill blank spaces in flex box in html
问题描述
如何使用 CSS 填补空白，其中框会自动占用空格？ 每个盒子可以有不同的尺寸。 如何随着屏幕尺寸的变化自动适应盒子？
.c1 { display: flex; flex-wrap: wrap; } #i1 { height: 220px; width: 100px; background-color: cornflowerblue; margin: 10px; }.c2 { background-color: blue; height: 100px; width: 100px; margin: 10px; }
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="c1"> <div id="i1"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> </div> <div id="a"></div> </body>
2 个解决方案
解决方案1
0 2022-01-05 17:47:51
position: absolute; 对于id属性值为i1的元素，当应用样式时，空格会被其他元素填充：
.c1 { display: flex; flex-wrap: wrap; } #i1 { height: 220px; width: 100px; background-color: cornflowerblue; margin: 10px; /* Added the following style */ position: absolute; }.c2 { background-color: blue; height: 100px; width: 100px; margin: 10px; }
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="c1"> <div id="i1"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div id="i1"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div id="i1"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> </div> <div id="a"></div> </body>
解决方案2
0 2022-01-05 22:12:27
我知道这个问题是关于 flex 的，但是没有使用 flex 的“动态”解决方案（即在每行元素数量可以改变的情况下），所以我下面的代码片段只是在某些情况下的解决方案：如果“ double-heigth" 元素只出现在最左边，您可以简单地在容器的所有子元素上使用float:left 。
.c1 * { float: left; } #i1 { height: 220px; width: 100px; background-color: cornflowerblue; margin: 10px; }.c2 { background-color: blue; height: 100px; width: 100px; margin: 10px; }
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="c1"> <div id="i1"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> </div> <div id="a"></div> </body>
Flex-box - 如何填充“整个”空间保留项目比例？
[英]Flex-box - how to fill the “entire” space preserving item proportions?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.