Question

我在容器中有一组内联块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/

Answer 1

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

使用弹性布局并添加填充最后一行空位的max_squares_in_a_row - 1个不可见“方块”。

我更新了原始代码段：

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

Answer 2

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

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

Answer 3

这会有效吗http://jsfiddle.net/gzB5k/3/

你可以{。1}} .wrap将它居中。但是你需要设置它的宽度。如果你需要.wrap更宽，那么只需使用另一个包装div。像.inner-wrap

之类的东西

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

Answer 4

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

因此，基本上只有当float:left或display:inline-block元素没有达到其父级的100％时，才能使用“收缩包装”效果水平居中。一旦它分解成第二行，它就不再居中了。

正如你在小提琴中的这个例子中所看到的那样，它无法完成。

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

Answer 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中，您可以使用以下代码段。

$block-width: 250px;

.wrap {

  width: $block-width;

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

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

5 个答案: