如何使子div相对于父母流动

Question

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

如果窗口大小大于1000，则我需要遵循3 column 布局，否则我需要遵循two column 布局。

我已经使用 JS 实现了这一点，但代码非常混乱。现在我想用 CSS 来做。但我被困住了。

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

常量：

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

如果窗口大小为500px（例如）子级必须为196px 和two column.

如果窗口大小为350px，则子级必须为175px，每个two column。

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

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

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

我的要求：

Answer 1

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

.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 
   }
 }

更新你的小提琴：https://jsfiddle.net/7kuah16h/9/

Answer 2

我添加了带有可能解决方案的 jsfiddle，但我不确定我是否正确理解了您的问题。你能确认这是你要找的吗？

您需要为特定断点定义具有宽度的媒体查询：

@media (min-width: 1000px) {
  .child {
    width: 33.33%;
  }
}

更多细节在小提琴中：

https://jsfiddle.net/wz5raza3/

当然，根据您的解决方案，您需要的不止于此，例如填充、边距或相等的列高。对于任何实际使用，使用 flexbox 会更好。

如果您只想使用旧方法学习基本布局，我建议： http://learnlayout.com/

Answer 3

这是使用@media screen 解决您的问题的近似方法。您可以根据需要调整内容块的屏幕值和宽度。

@media screen and (max-width: 350px) {
  .block {
    width:150px;
  }
}

@media screen and (max-width: 500px) and (min-width: 351px) {
  .block {
    width:196px;
  }
}

@media screen and (max-width: 999px) and (min-width: 501px) {
  .block {
    width:48%;
  }
}

@media screen and (min-width: 1000px) {
  .block {
    width:32%;
  }
}

.container {
  text-align:center;
}

.block {
  text-align:left;
  display:inline-block;
  background-color:#ddd;
  height:175px;
  margin:0px;
  padding:0px;
}

body {
  margin:0px;
  padding:0px;
}

<div class="container">
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
</div>

Answer 4

只需将 text-align: center 添加到父 div 即可。