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

Question

我正在制作一个布局，以浏览器窗口 100% 填充 DIV block 的方式并排显示内容 block

我记得看到一个纯 CSS 方法，它根据浏览器窗口调整 DIV 的宽度。如果空间允许，将显示 3 个 DIV，如果您减小浏览器的宽度，它将变为每行 2 个 DIV，将第 3 个向下推，同时保持理想宽度的 DIV 始终填满窗口。

我一直在尝试重新创建它

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

我以前确实看到过这样做。我记得即使禁用了 javascript 也能看到效果，所以我认为答案一定是 CSS

Answer 1

使用媒体查询。

/* 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%;    
    }
}