Центрируйте несколько встроенных блоков с помощью CSS и выровняйте последнюю строку влево
Я хочу горизонтально центрировать несколько встроенных блоков, но в то же время их выровнять влево в последней строке (см. ниже).
Проблема в том, что я достиг чего-то подобного (http://jsfiddle.net/5JSAG/):
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
Пока я хочу что-то вроде этого:
| _____ _____ |
| | | | | |
| | 1 | | 2 | |
| |_____| |_____| |
| _____ |
| | | |
| | 3 | |
| |_____| |
Вы можете увидеть образец HTML в http://jsfiddle.net/5JSAG/.
Я попытался использовать column-count
и column-width
, но он не работает так, как я хочу, потому что изменяется порядок блоков:
| _____ _____ |
| | | | | |
| | 1 | | 3 | |
| |_____| |_____| |
| _____ |
| | | |
| | 2 | |
| |_____| |
Ответы
Ответ 1
Нашел довольно простое решение этой проблемы: просто добавьте в конец некоторые разделители-заполнители, которые имеют одинаковую ширину с выровненными блоками.
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;
}
Ответ 2
Плавающие их, кажется, лучший вариант здесь. Вы можете поместить левое/правое поле на контейнер, если вам нужно место слева и справа, или вы можете дать контейнеру ширину и авто слева и справа поля.
Похоже, что это может стоить того же размера, что и неупорядоченный список.
Вот пример:
http://codepen.io/anon/pen/Ehgdp