如何获得瓷砖中心和左对齐在同一时间 [英] How to get tiles centered and left-justified at the same time

问题描述

我有一个容器的瓦片（或div），我想让容器居中，而瓦片左对齐在容器中。

I have a container of tiles (or divs) and I want the container to be centered, while the tiles are left justified in the container.

窗口很小：

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

I want this to work in Chrome at least, but I also need to eventually support latest FF, Safari, and IE 10+

推荐答案

正如@ Skadi2k3的回答中所提到的，你可以用CSS做最好的一系列媒体查询。

As mentioned in @Skadi2k3's answer, the best you can do with CSS is with a series of media queries.

话虽如此，如果你使用一个预处理器，如LESS - 这不是一个困难或容易出错的任务。 （虽然，是的，CSS仍然会长和丑陋）

That being said, if you are using a preprocessor such as LESS - this isn't such a difficult or error-prone task. (although, yes, the CSS will still be long and ugly)

如何利用LESS来设置媒体查询：

设置迭代mixin这样：（您可以将此代码粘贴到 http://less2css.org ）

Set up an iteration mixin like this: (You can paste this code into 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会以如下形式输出一系列的媒体查询：

The above mixin will spit out a series of media queries in the form:

@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;
  }
}

So with a simple markup like:

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

使用剩余CSS（LESS）：

With remaining 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;
}

...得到所需的结果。

... you get the desired result.

我需要做的是更改

所以让我们说，我有一个项目300px X 100px与一个最少2列和最多6列，边距为15像素 - 我只是修改变量如下：

So let's say I have items 300px X 100px with a minimum of 2 columns and max 6 columns and a margin of 15px - I just modify the variables like so:

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

这篇关于如何获得瓷砖中心和左对齐在同一时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！