如何在 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.