Question

无论页面宽度和每行的div数，我都希望我的页面居中浮动div。

如果页面每行适合三个div，并且我有四个div，我希望第四个div在第一个div之下。如果用户使窗口更宽，则第四个div向上移动到第一行：

[ [div1]  [div2]  [div3]  [div4] ]


[ [div1]  [div2]  [div3] ]
[ [div4]                 ]


[  [div1]  [div2]  ]
[  [div3]  [div4]  ]

我尝试制作容器div text-align：center和content divs inline-block但是这使得最后一行中的div像这样居中：

[ [div1]  [div2]  [div3] ]
[         [div4]         ]

这是我的代码：https://jsfiddle.net/g8L1ovj0/

Answer 1

flexbox可以做到

＆＃13;

.container {
  width: 80%;
  border: 1px solid grey;
  margin: 25px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  height: 150px;
  width: 150px;
  background: #000;
  flex: 0 0 auto;
  margin: 1px;
}

＆＃13;

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

＆＃13;

Codepen Demo

css中心水平浮动div

1 个答案: