html - 将两个 div 并排放置，如果空间足够则居中

Question

我想将随机数量的彼此相邻的 div 居中，但如果没有足够的空间容纳最后一个，它很可能不会居中。我想要这样的东西:

▢ ▢ ▢ ▢(<-没有更多空间，现在将 div 向下放置->)
▢ ▢ ▢ ▢(<-再次没有更多空间，现在将 div 向下放置->)
▢

如何做到这一点？请告诉我，让我明白如何

Answer 1

您可以使用固定宽度的容器以及其中的任何类型的元素。我创建了一个 fiddle ，您可以看看 Twitter Bootstrap Scaffolding。

Flux 提到了 flexbox，很好，我更新了 fiddle。

https://jsfiddle.net/661hktxf/2/

HTML

<div class="container-items clearfix">
  <div class="inner">
    <div class="item">
      item item item item item item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
  </div>
</div>

CSS

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:after {
  clear: both;
}

.container-items {
  margin: 0 auto;
  padding: 15px;
  width: 100%;
}
.inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media(min-width: 768px) {
  .container-items {
    width: 750px;
  }
}
@media(min-width: 992px) {
  .container-items {
    width: 970px;
  }
}
@media(min-width: 1170px) {
  .container-items {
    width: 1100px;
  }
}
.item {
  border: 1px solid #000;
  float: left;
  padding: 15px;
  text-align: center;
  width: 25%;
}