调整窗口大小时，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