如何同时使瓷砖居中并左对齐

Question

我有一个瓷砖(或div)的容器,我希望容器居中,而瓷砖在容器中左对齐.

所以如果窗口很小:

..[s][s][s]..
..[s][s].....

如果窗口稍微加宽:

...[s][s][s]...
...[s][s]......

进一步:

.[s][s][s][s].
.[s]..........

我试过了:

#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }

但这似乎不起作用.

我希望至少在Chrome中使用它,但我还需要最终支持最新的FF,Safari和IE 10+

Answer 1

FWIW:现在是2017年,网格布局模块开箱即用(codepen demo).如果浏览器支持适合您 - 那么使用网格.如果没有,那么请继续阅读....

正如在@ Skadi2k3的回答中所提到的,使用CSS可以做的最好的事情是使用一系列媒体查询.

话虽这么说,如果你使用的是LESS之类的预处理器 - 这不是一个如此困难或容易出错的任务.(虽然,是的,CSS仍然很长很难看)

FIDDLE或CODEPEN(支持少量)

以下是如何利用LESS设置媒体查询:

设置这样的迭代混合:(您可以将此代码粘贴到http://less2css.org)

@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for


.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        #content{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width);
}

.loopingClass (@item-width * @min-cols);

以上mixin将以下列形式吐出一系列媒体查询:

@media (min-width: 200px) {
  #content {
    width: 200px;
  }
}
@media (min-width: 300px) {
  #content {
    width: 300px;
  }
}
@media (min-width: 400px) {
  #content {
    width: 400px;
  }
}
...
@media (min-width: 1200px) {
  #content {
    width: 1200px;
  }
}

所以用一个简单的标记如:

<ul id="content">
    <li class="box"></li>
    <li class="box"></li>
    ...
    <li class="box"></li>
</ul>

剩下的CSS(LESS):

 #content {
    margin:0 auto;
    overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
    background: aqua;
}
.box {
    float: left;
    height: @item-height - 2 *@margin;
    width: @item-width - 2*@margin;
    margin:@margin;
    background-color:blue;
}

......你得到了理想的结果.

...而且定制布局非常容易:

我需要做的就是根据我的需要更改我在LESS mixin中使用的变量 - 我得到了我所追求的确切布局.

所以,假设我有300px X 100px的项目,最少2列,最多6列,边距为15px - 我只修改变量,如下所示:

@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;

...瞧,我得到这个CODEPEN