元素居中网格中的最后一行左对齐

小编典典

元素居中网格中的最后一行左对齐

css

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

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  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块的样式。无论有多少列，块都
必须始终保持居中 。

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

阅读 299

2020-05-16

共1个答案

小编典典

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

对我来说很好。

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是必需的:)

2020-05-16