html - 如何使子 div 相对于父 div 流畅

Question

我有一个 two/three基于屏幕尺寸的列布局。

如果窗口大小大于 1000比我需要遵循 3 column其他布局我需要遵循 two column布局。

我是用JS实现的，但是代码很乱。现在我想用 CSS 来做。但是我卡住了。

这是 JSFiddle:https://jsfiddle.net/7kuah16h/1/

Constants:

Child Min Width (148px) including padding
child Max Width (196px) including padding

如果窗口大小是 500px (例如) child 必须是 196px每个和 two column.

如果窗口大小是 350px child 必须是 175px每个在 two column .

如果窗口大小变为 1000px然后它应该转换为 3 列布局。

如果窗口大小小于 1000px所有内容都应居中对齐。

child 必须将其宽度 a/c 更改为可用宽度。

我的要求:

Answer 1

如果你只想support modern browsers你可以使用 flex 盒子，避免使用 float 盒子和溢出。更适合响应式设计和移动设备。

.parent {
    display: flex;
    flex-wrap: wrap;
}
.child {
    height: 50px;
    flex: 0 1 50%; // 2 boxes 
 }

 @media (min-width: 1000px) {
   .child {
       flex: 0 1 33.33%; // 3 boxes for screens bigger than 1000px 
   }
 }

更新你的 fiddle :https://jsfiddle.net/7kuah16h/9/