为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

拉风的咖菲猫 2019-09-24 10:30:47
我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块的样式。无论有多少列,块都必须始终保持居中。这是一支可以更好地演示的笔:http://codepen.io/anon/pen/IDsxn这可能吗?我觉得肯定应该。我宁愿不要使用flexbox,因为它只有ie10 +,我想使用ie9 +。我真的很想要一个纯CSS解决方案,但是如果您告诉我JS是唯一的方法,那么我很乐意看到它的实际效果。
查看完整描述

3 回答

  • 3 回答
  • 0 关注
  • 730 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信