CSS 仅动态 DIV 宽度，即。如果浏览器宽度允许，每行多 DIVs

Question

我正在制作一个布局，以浏览器 window 100% 填充 DIV 块

的方式并排显示内容块

我记得看到一个 CSS only 方法，它根据浏览器 window 调整 DIV 的宽度。如果 space 允许，则显示 3 DIVs，如果您减小浏览器的宽度，它将变为每行 2 DIVs，将第 3 个向下推，同时保持 DIVs 处于理想宽度，始终填充 window.

我一直在尝试重现这个

假设我需要 500 像素的最小宽度。如果有 1000px 可用，它将每行显示 2 个块。如果 1500px，每行 3 个块，依此类推。但是根据可以容纳多少块，我需要每个块的宽度是动态的，以便让浏览器 window 填充。

我以前完全看过这个。我记得即使禁用 javascript 也能看到效果，所以我认为答案必须是 CSS

Answer 1

您可以使用media queries来实现您想要的。

基本上根据window宽度设置要跳转的地方，从1跳到2，从2跳到3，从3跳到4等等。

并以 % 表示宽度。这样，现有项目将拉伸到可用宽度。

如果要连续放置 3 个，请使用宽度 33%，要放置 2 个，请使用宽度 50%，依此类推。

如果你不能让他们断线，你可以用nth-child强制他们。

Answer 2

使用媒体查询。

/* Display 3 items per row for browsers with width >= 1024px */
@media (min-width: 1024px) {
    .items {
        width: 33.33%;    
    }
}

/* Display 2 items per row for browsers with width >= 768px and width <= 1023px */
@media (min-width: 768px) and (max-width: 1023px){
    .items {
        width: 50%;    
    }
}

/* Display 1 item per row for browsers with width <= 767px */
@media (max-width: 767px){
    .items {
        width: 100%;    
    }
}

CSS 仅动态 DIV 宽度，即。如果浏览器宽度允许，每行多 DIVs

CSS only dynamic DIV widths ie. more DIVs per row if browser width allows

html

css

layout

list