容器内内联块的中心网格答案

【问题标题】：Center grid of inline-blocks within container容器内内联块的中心网格
【发布时间】：2017-03-18 01:56:20
【问题描述】：

我在容器中有一组内联块 div。我希望这个 div 形成一个适当的“类似表格”的网格，元素向左对齐，所以如果网格的最后一行包含的元素比其他网格少，则网格不会被破坏。

此外，网格本身需要相对于容器居中。

显而易见的方法是将网格放在包装器中，为包装器设置text-align: left，并在父容器中居中包装器本身。

但在这种情况下，包装器的宽度将不适合单行中元素长度的总和，而是适合容器的宽度。

通常的解决方案 - 为包装器设置 display:inline-block 在这种情况下不起作用，可能是因为包装器中的内联块。

HTML

<div class="container">
    <div class="wrap">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
        <div class="square">7</div>
    </div>
</div>

CSS

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
    display: inline-block;
}

.wrap{
     border: 1px solid green;
}

.container{
    width: 250px;
    border: 1px solid blue;
    padding: 5px;
}

JSFiddle 我的代码在这里可用 - http://jsfiddle.net/prepin/gzB5k/

【问题讨论】：

那你为什么不能用一张桌子？
@LeviBotelho 表不支持可变页面宽度
如果您使用百分比值调整大小，则可以。如果您确切说明您想要达到的效果，我很乐意尝试并提出建议。
找不到你的插图

标签： css

【解决方案1】：

如果您知道一行中的最大方块数，则可以在最近的浏览器（2013/2014）中完成。

使用 flex 布局并添加 max_squares_in_a_row - 1 不可见的“正方形”来填充最后一行的空白位置。

我更新了原来的sn-p：

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
    display: inline-block;
}
.square.empty {
    /* make "placeholders" invisible */
    height: 0;
    /* padding: 0; */
    /* border: 0; */
    margin-top: 0;
    margin-bottom: 0;
}

.wrap{
    border: 1px solid green;
     
    /* use flex layout here: */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.container{
    width: 250px;
    border: 1px solid blue;
    padding: 5px;
}

<div class="container">
    <div class="wrap">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
        <div class="square">7</div>
        <!-- add (max squares in row - 1) empty placeholders: -->
        <div class="square empty"></div>
        <div class="square empty"></div>
        <div class="square empty"></div>
    </div>
</div>

【讨论】：

【解决方案2】：

在 CSS3 中使用 flex 进行检查，如示例所示 here 是可能的

：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

据我所知，没有 JS 就无法做到这一点。问题在于“包装”元素。为了使其居中（及其内容），宽度最多不是 100%。但是，如果设置固定宽度，则元素不再是流动的。

所以基本上你只能水平居中 float:left 或 display:inline-block 元素，只有当它没有达到其父元素的 100% 时才具有“收缩包装”效果。一旦分解为第二行，它就不再居中。

正如您从 Fiddle 中的这个示例中看到的那样，它无法完成。

小提琴：http://jsfiddle.net/gzB5k/4/

【讨论】：

如果他需要一个流畅的设计，但每行的元素数量是固定的，可以通过将每一行包装在一个容器中来实现。
@kalema 请拨弄一下。我想看看这个。
我明白你现在在说什么了。这与我刚刚在 Fiddle 中所做的没有什么不同。就像我说的，如果元素的数量没有达到它的父元素的 100%，它可以居中......

【解决方案4】：

可以吗：http://jsfiddle.net/gzB5k/3/

您可以margin: 0 auto .wrap 使其居中。但是你需要设置它的宽度。如果您需要 .wrap 更宽，那么只需使用另一个包装器 div。 .inner-wrap 之类的东西

在这样的网格上，我更喜欢使用浮动而不是内联块。它表现得更好。

【讨论】：

不适用于流体布局（非静态宽度）。

【解决方案5】：

使用多个媒体查询来设置容器的宽度。请参见下面的示例。

然后您可以使用margin: 0 auto 将容器居中。还要在 .square 元素上设置 float:left; 而不是 display: inline-block。

@media (min-width: 500px) {
  .wrap {
    width: 500px;
  }
}

@media (min-width: 750px) {
  .wrap {
    width: 750px;
  }
}

+ for 1000px, 1250px, 1500px, 1750px

在 SASS 中你可以使用下面的 sn-p。

$block-width: 250px;

.wrap {

  width: $block-width;

  @for $i from 1 through 14 {
   @media (min-width : $block-width * $i) {
   width: $block-width * $i;
  }
}

【讨论】：