Question

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

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

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

虽然我想要这样的事情：

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

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

我已尝试使用column-count和column-width，但它无法正常工作，因为块的顺序发生了变化：

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

Answer 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;
}

Answer 2

浮动它们似乎是最好的选择。如果左侧和右侧需要空间，您可以在容器上放置左/右边距，或者您可以为容器指定宽度并自动左右边距。

看起来作为无序列表也可能值得保证。

以下是一个例子：

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

使用CSS居中多个内联块并将最后一行对齐到左侧

2 个答案: