我有一堆相同大小的块设置显示：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是唯一的方式，我很想看到在行动。
供参考 – 类似问题，虽然没有彻底解释：
How to align left last row/line in multiple line flexbox
CSS – Left align the last row of images in a centered div
Center multiple inline blocks with CSS and align the last row to the left
解决方法
这里有一个非常简单的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是必需的:)
