調整窗口大小時，Div 不顯示為 4 列並縮小為 2

Question

我有一個 div 有 4 個項目，並希望在大型設備的單行中顯示它們。 它確實按我的意願顯示，但是頁面上有一個滾動條，這很煩人。 如果有意義的話，我需要從左到右滾動以查看所有項目。

這是代碼：

 .container { display: flex; width: 100%; height: 534px; } @media only screen and (max-device-width: 1080px) { .container { flex-direction: row; flex-wrap: wrap; width: 100%; } } .item{ width: 250px; position: relative; margin: 50px auto; }

 <div class="container"> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div>

Answer 1

您有多種選擇，具體取決於您想要的結果。

最簡單的是當窗口太小而無法容納所有項目時，只允許項目（具有固定寬度）換行到下一行。 這意味着您有時可能會在第一行得到 3，在第二行得到 1。

通過更多控制，您可以切換到確保連續有 4 個或 2 個（或者，在非常窄的窗口上，1 個）項目。

此代碼段使用網格來執行此操作，並使用 max-width 設置斷點（請參閱下面的注釋）。

 .container { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 534px; } @media only screen and (max-width: 1080px) { .container { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 270px) { .container { grid-template-columns: repeat(1, 1fr); } } .item { width: 250px; position: relative; margin: 50px auto; }

 <div class="container"> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div>

注意： device-width已棄用（參見例如 [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width][1]

並且設備的寬度並不真正相關——我們需要調整的是窗口的寬度。 這是在具有最大寬度的媒體查詢中完成的。

另請注意，由於您為容器設置了固定高度，因此您的原始代碼和此代碼段都會減少每個項目的高度以用於較窄的視口。 如果您希望項目保持全高，請在項目上設置高度（或相應地調整容器的高度）。 [1]： https ://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width