Question

我有一个网格，由内联块元素组成，因此它们可以溢出到其他行。

问题在于，如果行未完成，则该行中的项目也会居中并且不会与左侧对齐，就好像它们只是溢出一样。

问题可见于此Fiddle。

有没有办法在纯CSS中执行此操作？容器是否居中，但其中的元素仍然在左侧？

我已经尝试使用margin: 0 auto;使容器居中，但容器必须具有固定的宽度，但在这种情况下容器会尽可能地扩展（填充外部容器）。

编辑：我能想到的唯一方法是使用Javascript获取容器的宽度，然后将宽度除以元素的宽度（因为它们具有相同的宽度），将宽度应用于容器并继续使用保证金：0自动;方法

Answer 1

在一般情况下（see this post），这是不可行的，因为CSS无法确定元素何时换行，因此重新计算所需的空白空间。

与该帖子中的解决方案类似，您可以使用媒体查询来实现此结果。我写了一个更具体的案例版本：

SELECT DISTINCT TL From [Data$]

.grid {
  margin: 0 auto;
  width: 990px;
  font-size: 0;
}

.item {
  display: inline-block;
  margin: 5px;
  width: 100px;
  height: 100px;
  background: red;
}

@media screen and (max-width: 230px) {
  .grid {
    width: 110px;
  }
}
@media screen and (min-width: 231px) and (max-width: 340px) {
  .grid {
    width: 220px;
  }
}
@media screen and (min-width: 341px) and (max-width: 450px) {
  .grid {
    width: 330px;
  }
}
@media screen and (min-width: 451px) and (max-width: 560px) {
  .grid {
    width: 440px;
  }
}
@media screen and (min-width: 561px) and (max-width: 670px) {
  .grid {
    width: 550px;
  }
}
@media screen and (min-width: 671px) and (max-width: 780px) {
  .grid {
    width: 660px;
  }
}
@media screen and (min-width: 781px) and (max-width: 890px) {
  .grid {
    width: 770px;
  }
}
@media screen and (min-width: 891px) and (max-width: 1000px) {
  .grid {
    width: 880px;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1110px) {
  .grid {
    width: 990px;
  }
}

不建议编写这么多媒体查询。我实际上是使用Sass生成它们（请参阅my CodePen）：

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

上述解决方案有其局限性，只能使用固定数量的块。如果这是一个问题，您将不得不使用Desandro Masonry之类的JavaScript库，或者只是自己动手。

Answer 2

似乎不可能只使用CSS方法（除非使用Flexbox）。

这意味着我将使用Javascript设置＆＃34;设置宽度并使用margin：0 auto＆＃34;方法

最好的方法是使用@Nelson Yeung提出的仅CSS方法，但我会在多个页面上使用它，容器宽度不一样。

同样有趣的是，Zeplin是前端开发者的平台＆lt;＆gt;设计师也在使用我将要使用的方法。

CSS - 网格行居中

2 个答案: