css - 在元素的中心网格中左对齐最后一行

Question

我在一个设置为对齐块display:inline-block的 div 内设置了一堆相同大小的块。text-align:center

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

块水平填充 div，随着浏览器窗口的缩小，一些块会换行，创建更多的行和更少的列。我希望所有内容仍保持居中，最后一行与左侧齐平对齐，如下所示：

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

目前发生的情况是这样的：

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

我不能像一个建议那样添加额外的填充 div，因为可能有任意数量的块，并且行和列的数量会因浏览器宽度而异。出于同样的原因，我也不能直接设置块 #7 的样式。无论有多少列，块必须始终保持居中。

这里有一支笔可以更好地演示：

http://codepen.io/anon/pen/IDsxn

这可能吗？我觉得应该是的。我宁愿不使用 flexbox，因为它只有 ie10+，我想要 ie9+。我真的很想要一个纯 CSS 解决方案，但如果你告诉我 JS 是唯一的方法，我很乐意看到它的实际应用。

供参考 - 类似的问题，但没有一个被彻底解释：

如何在多行flexbox中对齐左最后一行/行

CSS - 左对齐居中 div 中的最后一行图像

修复在流体容器网格中将最后一行元素居中对齐，而容器保持居中

使用 CSS 将多个内联块居中并将最后一行向左对齐

Answer 1

显示内联块的解决方案

这种自适应网格要简单得多：更少的标记和更少的 CSS，因此它更容易在生产站点中实现并适应您的确切需求。

=>> DEMO <<=（调整结果窗口大小以查看效果）

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

它涉及 ：

1. 4 个 200px 宽块的媒体查询和一个可扩展至 1000px 的容器。根据网格元素的宽度和容器的总宽度，您可能需要减少或增加

2. 删除inline-block 元素之间的空格（在下面的演示中，我使用了 font-size 技术，但您可以使用其他技术（请参阅如何删除 inline-block 元素之间的空格？其他技术）

3. 块之间的固定边距

一行中的块数适应容器的大小。该text-align属性保持默认值left，因此最后一项左对齐。

---

在块和容器之间具有自适应边距的浮动

=>> DEMO <<=（您需要将结果窗口调整到 750px 以下才能看到它的实际效果）

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}

<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

该技术涉及：

1. 花车
2. position:absolute;
3. :nt-child()CSS 选择器
4. 媒体查询

它将块在其容器中居中，并在容器的所有块 + 侧面的顶部/左侧/紧/底部提供相同的边距。由于此解决方案使用浮点数，因此最后一行左对齐。

一行中的块数适应窗口的宽度。

Answer 2

这是一个非常简单的 JavaScript（以及 CSS 中的一些小改动）解决方案：

http://jsfiddle.net/ha68t/

它对我来说很好。

CSS：

.container {
  margin: 0 auto;
  max-width:960px;
  background-color: gold;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: block;
  float: left;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

JavaScript：

$(document).ready(function(){
    setContainerWidth();
});

$(window).resize(function(){
   setContainerWidth();
});

function setContainerWidth()
{
    $('.container').css('width', 'auto'); //reset
    var windowWidth = $(document).width();
    var blockWidth = $('.block').outerWidth(true);
    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
    $('.container').width(maxBoxPerRow * blockWidth);
}

需要 jQuery :)

Answer 3

对于它的价值：现在是 2017 年，网格布局模块开箱即用

* {
    margin:0;
    padding:0;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
  justify-content: center;
  align-content: flex-start;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
}
.block {
  background-color: #ddd;
  border: 1px solid #999;
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
  <div class="block">Foo</div>
</div>

（Codepen 演示）。

如果浏览器支持适合您 - 然后使用网格。如果没有，请继续阅读......

---

正如@Web-tiki 的回答中提到的，你可以用 CSS 做的最好的事情是使用一系列媒体查询。

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

更新的CODEPEN（调整窗口大小以查看结果）

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

首先根据您需要的设计设置一些较少的变量：

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

然后：

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

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

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

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

上面的 mixin 会以如下形式吐出一系列媒体查询：

@media (min-width: 208px) {
  .container {
    width: 208px;
  }
}
@media (min-width: 312px) {
  .container {
    width: 312px;
  }
}
@media (min-width: 416px) {
  .container {
    width: 416px;
  }
}
@media (min-width: 520px) {
  .container {
    width: 520px;
  }
}
@media (min-width: 624px) {
  .container {
    width: 624px;
  }
}
@media (min-width: 728px) {
  .container {
    width: 728px;
  }
}
@media (min-width: 832px) {
  .container {
    width: 832px;
  }
}

剩下的 CSS (LESS)：

.container {
  margin: 0 auto;
  text-align: center;
  overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
}
.block {
  background-color: #ddd;
  border:1px solid #999;
  box-sizing:border-box;
  float: left;
  height: @item-height;
  width: @item-width;
  margin:@marginV @marginH;
}

...你会得到想要的结果。

...而且自定义布局非常容易：

我需要做的就是根据我的需要更改在 LESS mixin 中使用的变量——我得到了我想要的确切布局。

Answer 4

使用 flexbox，一些伪元素，一个额外的 div，在经历了很多挫折之后，我能够在没有媒体查询的情况下实现这一点（因为我需要将我的网格放在许多不同大小的元素中，媒体查询对我来说真的不起作用） .

一个警告：项目之间的排水沟是流动的。

演示：http ://codepen.io/anon/pen/OXvxEW

CSS：

.wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #ffc0cb;
    max-width: 1100px;
    margin: 0.5rem auto;
    justify-content: center;
}

.wrapper:after {
    content: ' ';
    flex: 1;
    height: 100%;
    border: 1px solid #00f;
    margin: 0.5rem;
}

.child {
    flex: 1;
    border: 2px solid #ffa500;
    min-width: 300px;
    margin: 0.5rem;
    text-align: center;
}

.child-contents {
    width: 300px;
    border: 2px solid #008000;
    height: 100px;
    margin: 0 auto;
}

HTML：

<div class='wrapper'>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>

    ...etc., more .child's...

</div>

最终结果是这样的，其中绿色矩形是 div。粉红色/橙色边框仅供参考，以便您了解发生了什么。如果您删除粉红色/橙色边框，您应该得到您正在寻找的网格（尽管再次注意排水沟是流动的）。

Answer 5

用简单的 css 试试这个：

CSS：

.row{text-align:center;font-size:0;} .block{text-align:center;display:inline-block;width:150px;height:15px;margin:5px; 边框：1px 实心#dddddd；字体大小：13px；}

HTML：

<div class="row">
  <div class="block"></div> 
</div>

.row{text-align:center;font-size:0;}
    .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;}

<div class="row">
      <div class="block">1</div> 
      <div class="block">2</div> 
      <div class="block">3</div> 
      <div class="block">4</div> 
      <div class="block">5</div> 
      <div class="block">6</div> 
      <div class="block">7</div> 
      <div class="block">8</div> 
    </div>

Answer 6

迄今为止，唯一干净的解决方案是使用

CSS 网格布局模块（Codepen 演示）

基本上必要的相关代码归结为：

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fill, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: center; /* (4) */
  align-content: flex-start; /* (5) */
}

1）使容器元素成为网格容器

2) 使用宽度为 120 像素的“自动”列数设置网格。（自动填充值用于响应式布局）。

3) 为网格行和列设置间隙/排水沟。

4) 和 5) - 类似于 flexbox。

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-gap: 1rem;
  justify-content: center;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Codepen demo（调整大小看效果）

---

浏览器支持 - Caniuse

目前由 Chrome (Blink) 和 Firefox 支持，部分支持来自 IE 和 Edge（参见Rachel Andrew 的 这篇文章）

---

进一步阅读 CSS 网格：

• MDN
• Jen Simmons - 学习 CSS 网格
• CSS 网格完整指南 | Codrops CSS 参考
• 网格完整指南 - CSS 技巧

Answer 7

使用弹性盒：

.container {
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: inline-block;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

完毕。

Answer 8

您的问题没有“正常”解决方案，只有提到的“解决方法”。

情况是，您的块容器将可用空间填充到最大可用/设置，然后将所有内部块分解到下一行，这将导致容器溢出。此外，对于浮动等其他配置，它的行为也是相同的。这就是渲染的工作方式——每次都在空间中贪婪地计算内部元素的行为。

也许未来的 Flexbox会让这成为可能——但我没有阅读完整的规范。只是猜测...