我想在水平居中放置一些内联块,但同时让它们在最后一行向左对齐(见下文)。
问题是我实现了这样的东西(http://jsfiddle.net/5JSAG/):
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
而我想这样写:
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
您可以在http://jsfiddle.net/5JSAG/上看到一些示例HTML。
我已经尝试使用column-count
和column-width
,但它不工作,因为我想要它,因为块的顺序改变:
| _____ _____ |
| | | | | |
| | 1 | | 3 | |
| |_____| |_____| |
| _____ |
| | | |
| | 2 | |
| |_____| |
找到了一个非常简单的解决方案:只需在末尾添加一些填充符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;
}
浮动它们似乎是最好的选择。如果你需要左右空间,你可以在容器上设置左右边距,或者你可以给容器设置宽度和自动左右边距。
看起来也值得将其作为无序列表留白。
下面是一个例子:
http://codepen.io/anon/pen/Ehgdp