84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
您好，我有一個 CSS 問題。 有兩列，右 (B) 列的固定寬度為 100px，左 (A) 列必須填入剩餘寬度。另外，在 A 列內，有一個水平新增的子元件清單。
問題是，當新增子元件時，A列的寬度變長，B列變低。
如何讓新增子元件時，如果超過A列寬度，則新增到A列內的底線？
您可以使用顯示網格來取代 Flex。使用網格，您可以定義項目是動態的還是靜態的。
範例：
.main { display: grid; grid-template-columns: 1fr 100px; }
<div class="main"> <div class="dynamic-size"> I am dynamic in size </div> <div class="static-size"> I'll always be 100px </div> </div>
grid-template-columns 中的 1fr 代表一個可用空間，這意味著除了第二個元素的 100px 之外的所有空間都將被第一個元素填滿。
在整個容器和 A 上都使用 flex-wrap，並將 A 框的寬度設為 calc(100% - 100px)。
body { width: 100vw; padding: 0; margin: 0; color: white; } #flex { display: flex; background-color: grey; width: 100vw; height: fit-content; flex-wrap: wrap; } #a { width: calc(100% - 100px); height: fit-content; background-color: red; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } #a .x { width: 100px; margin: 10px; background-color: green; height: 200px; } #b { width: 100px; height: 500px; background-color: blue; }
<div id="flex"> <div id="a"> A <div class="x">X</div> <div class="x">X</div> <div class="x">X</div> </div> <div id="b"> B </div> </div>
您可以使用顯示網格來取代 Flex。使用網格，您可以定義項目是動態的還是靜態的。
範例：
.main { display: grid; grid-template-columns: 1fr 100px; }<div class="main"> <div class="dynamic-size"> I am dynamic in size </div> <div class="static-size"> I'll always be 100px </div> </div>grid-template-columns 中的 1fr 代表一個可用空間，這意味著除了第二個元素的 100px 之外的所有空間都將被第一個元素填滿。
在整個容器和 A 上都使用 flex-wrap，並將 A 框的寬度設為 calc(100% - 100px)。
body { width: 100vw; padding: 0; margin: 0; color: white; } #flex { display: flex; background-color: grey; width: 100vw; height: fit-content; flex-wrap: wrap; } #a { width: calc(100% - 100px); height: fit-content; background-color: red; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } #a .x { width: 100px; margin: 10px; background-color: green; height: 200px; } #b { width: 100px; height: 500px; background-color: blue; }<div id="flex"> <div id="a"> A <div class="x">X</div> <div class="x">X</div> <div class="x">X</div> </div> <div id="b"> B </div> </div>