左对齐元素的中心网格中的最后一行 [英] Left aligned last row in centered grid of elements

问题描述

我有一堆相同大小的块设置为 text-align：center c：display：inline-block code>设置为对齐块。

I have a bunch of same-size blocks set to display:inline-block inside a div that has text-align:center set to align the blocks.

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

块水平填充div，当浏览器窗口缩小时，创建更多的行和更少的列。我想让一切仍然保持中心，最后一行对齐对齐，像这样：

The blocks fill the div horizontally, and as the browser window shrinks, some blocks break to new lines, creating more rows and less columns. I want everything to still remain centered, with the last row aligned flush to the left, like this :

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

当前发生的是以下情况：

What currently happens is this:

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

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

I cannot add extra filler divs like one suggestion, because there could be any number of blocks, and the amount of rows and columns will vary depending on browser width. I also cannot style block #7 directly, for the same reason. The blocks must always remain centered no matter how many columns.

以下是更好地演示的笔：

Here is a pen to better demonstrate:

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

这是否可能？我觉得肯定应该。我宁愿不使用flexbox，因为它只有ie10 +，我想ie9 +。我真的很喜欢一个纯CSS解决方案，但如果你告诉我JS是唯一的方式，我很想看到在行动。

Is this possible? I feel like it sure should be. I would prefer not to use flexbox as it is only ie10+, and I'd like ie9+. I would really like a pure CSS solution, but if you tell me JS is the only way, I'd love to see that in action.

参考 - 类似问题，但没有彻底解释：

For reference - similar questions, though none were thoroughly explained:

如何在多行flexbox中排列最后一行/行

CSS - 左对齐中心div中的最后一行图像< a>

CSS - Left align the last row of images in a centered div

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

中心多inline blocks with CSS and align the last row to the left

推荐答案

这里有一个非常简单的JavaScript您的CSS更改）解决方案：

Here's a very simple JavaScript (and some small changes in your CSS) solution for you:

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：）

这篇关于左对齐元素的中心网格中的最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！