2

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

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

这是我需要的说明：http: //note.io/157hjk1

显而易见的方法是将网格放在包装器中，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/

4

5 回答 5

2

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

使用 flex 布局并添加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>

于 2017-03-17T17:56:20.910 回答
1

检查在 CSS3 中使用 flex，如这里所示的示例，这是可能的

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

于 2015-08-13T13:40:17.500 回答
0

那行得通吗：http: //jsfiddle.net/gzB5k/3/

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

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

于 2013-05-26T14:14:40.360 回答
0

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

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

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

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

于 2013-05-26T14:54:17.260 回答
0

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

然后，您可以使用 将容器居中margin: 0 auto。还要float:left;在 .square 元素上设置 a 而不是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;
  }
}
于 2016-03-23T23:43:00.917 回答