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

【问题标题】：Center multiple inline blocks with CSS and align the last row to the left使用 CSS 将多个内联块居中并将最后一行向左对齐
【发布时间】：2013-04-28 19:22:34
【问题描述】：

我想将几个内联块水平居中，但同时让它们在最后一行的左侧对齐（见下文）。

问题是我实现了这样的事情（http://jsfiddle.net/5JSAG/）：

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|            _____            |
|           |     |           |
|           |  3  |           |
|           |_____|           |

虽然我想要这样的东西：

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  3  |               |
|       |_____|               |

您可以在http://jsfiddle.net/5JSAG/ 看到一些示例 HTML。

我尝试过使用column-count 和column-width，但它并没有按照我的意愿工作，因为块的顺序发生了变化：

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  3  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  2  |               |
|       |_____|               |

【问题讨论】：

标签： html css

【解决方案1】：

找到了一个非常简单的解决方案：在最后添加一些填充 div，它们的宽度与对齐的块相同。

http://jsfiddle.net/5JSAG/34/

HTML：

<div style="text-align:center">
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
</div

CSS：

.fill
{
    display:inline-block;
    width:100px;
    height:0px;
    line-height:0px;
    font-size:0px;
}

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
}

【讨论】：

有趣的想法。但就我而言，它有点不同。我根据数组动态创建<div class="entry">1</div>。数组的元素是动态变化的，数组的长度是未知的。你知道怎么解决吗？

【解决方案2】：

在这里浮动它们似乎是最好的选择。如果您需要左右空间，您可以在容器上放置左右边距，或者您可以给容器一个宽度和自动左右边距。

看起来也值得将其作为无序列表进行边缘化。

这是一个例子：

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

【讨论】：

浮动似乎将它们从容器中取出，它们不再居中。在容器上设置边距无效。
我已经更新了我的示例。我添加了overflow: hidden; 以强制容器环绕浮动内容，并且我有左/右边距使容器居中。
这很接近，但我需要容器的宽度是灵活的。有什么方法可以实现吗？如果没有灵活的宽度，我可以只使用一张桌子。
当然，容器的宽度可以是灵活的。很难让它死在中心，仅此而已。我最初将容器的宽度设置为 60%，但将其更改为最大宽度。但您可以将其改回如下内容：.container { list-style: none; margin: 0 auto; width: 60%; overflow: hidden; }.
问题是我需要它们完全居中。通过建议的更改，右侧的边缘大了 50-100 像素。