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

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年，grid layout module开箱即用（codepen demo）。如果browser support适合你 - 那么使用网格。如果没有，请继续阅读......

---

如@ Skadi2k3的回答所述，使用CSS可以做的最好的事情是使用一系列媒体查询。

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

FIDDLE或CODEPEN (Supports LESS)

以下是利用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

Answer 2

这个怎么样？

http://jsfiddle.net/cHTVd/1/

您还必须为容器设置display: inline-block：

body { text-align: center; }

#container { 
    width: 250px; 
    border: solid green 3px; 
    display: inline-block; 
    text-align: left; 
}

.tile { width: 100px; 
    border: solid red 3px;
    display: inline-block;
    margin: 8px;
}

编辑：轻松提供容器相对宽度 - http://jsfiddle.net/cHTVd/3/

我担心“反向辩护”必须用JS来完成。 CSS text-align只有四个值：left |对|中心|自圆其说。将其改为证明 - http://jsfiddle.net/cHTVd/4/是微不足道的。对于“反向对齐”，您可能需要一些与此类似的javascript工作：http://jsfiddle.net/yjcr7/2/。

Answer 3

除非你想使用Javascript，否则你可以使用媒体查询（很多）：

#parent{ width: 100px; margin: 0 auto;padding:0;}
.tile{width: 80px; float:left;padding:10px;outline:2px dashed red;}
@media screen and (max-width:200px)
@media screen and (min-width:201px) and (max-width:300px){
    #parent{ width: 200px;}
}
@media screen and (min-width:301px) and (max-width:400px){
    #parent{ width: 300px;}
}
@media screen and (min-width:401px){
    #parent{ width: 400px;}
}

问题是你需要知道有多少瓷砖适合容器，以便为容器设置一个紧密的配合宽度，但这是一个自下而上的信息，而不是级联的工作方式。如果你想要一个更优雅的解决方案，你需要在调整大小事件上使用JS，计算一行中适合多少个盒子并设置容器的宽度。

Answer 4

我通过简单地添加几个空的＆＃34;瓷砖来快速而肮脏地在我自己的项目中解决了这个问题。到最后的宽度与常规内容图块相同，但高度可以忽略不计。这些空的瓷砖用于推动＆＃34;推动＆＃34;内容磁贴位于它们所属的左侧最后一行。 （＆＃34;真正的＆＃34;最后一行通常只包含对用户不可见的空白区块。）因此，例如，如果页面上有一定数量的区块，我希望浏览器的宽度为了能够容纳1到4个（例如）宽度的瓷砖，我将添加3个额外的空瓷砖（指定为＃34; e＆＃34;）到最后：

..[s][s][s]..
..[s][s][e]..
...[e][e]....  // this row isn't visible because [e] has no content

如果窗口稍微加宽：

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

进一步：

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

或更窄：

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

或非常狭窄

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

空的瓷砖可能堆积在底部，但由于它们的高度较小，因此不会产生大量额外的空白。

一个确定的hackish解决方案，但确实有效，在不同浏览器上可靠，并且不需要大量代码。

Answer 5

像Danield一样回答，但是在SCSS中：

*
{
    margin:0;padding:0;
}

$item-width:200px;
$item-height:100px;
$margin: 15px;
$min-cols:2;
$max-cols:6; //set an upper limit of how may columns you want
             //to write the media queries forss to css

@for $i from $min-cols to $max-cols + 1 {
  $index-width: $i*$item-width;
  @media (min-width:$index-width) {
    #content {
      width: $index-width;
    }
  }
}


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

它生成与他的解决方案相同的CSS。

工作代码集示例here。

Answer 6

试试这个：

.tiles: { 
  display: inline-block;
  margin: 0 auto;
  max-width: 90%;
}

没有垂直边距，水平边的自动边距！

Answer 7

使用flexbox非常简单。

.container { 显示：flex; flex-wrap：wrap; }

您可以自定义贴砖的配合方式，例如为它们提供起点（柔性基础）或贴砖可以增长或缩小的程度

.tile { flex-grow：0; flex-shrink：0; flex-basis：3em;

查看代码簿：http://codepen.io/anon/pen/uexbf

Answer 8

看起来有solution（虽然用俄语描述，但我没有找到翻译） 可以看到演示here。

Answer 9

如果可能的话，不知道如何使用CSS。但是使用 jQuery it's相当简单：

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>