我想将几个内联 block 水平居中,但同时让它们在最后一行向左对齐(见下文)。
问题是我实现了这样的事情(http://jsfiddle.net/5JSAG/):
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
虽然我想要这样的东西:
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
您可以在 http://jsfiddle.net/5JSAG/ 查看一些示例 HTML .
我已经尝试使用 column-count
和 column-width
但它没有像我想要的那样工作,因为 block 的顺序发生了变化:
| _____ _____ |
| | | | | |
| | 1 | | 3 | |
| |_____| |_____| |
| _____ |
| | | |
| | 2 | |
| |_____| |
最佳答案
找到了一个非常简单的解决这个问题的方法:只需要在末尾添加一些填充 div,这些 div 与对齐的 block 具有相同的宽度。
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;
}
关于html - 使用 CSS 将多个内联 block 居中并将最后一行向左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16375009/