如何使父母对孩子产生流动性

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，则所有内容都应对齐 center 。

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

我的要求：

Answer 1

我已经为jsfiddle添加了一个可能的解决方案，但我不确定我是否正确理解了你的问题。你能证实这是你想要的吗？

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

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

小提琴中的更多细节：

https://jsfiddle.net/wz5raza3/

当然，根据您的解决方案，您需要更多，例如填充，边距或相等的柱高。对于任何实际使用，你最好使用flexbox。

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

Answer 2

如果您只想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 3

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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