CSS ile birden çok satır içi bloğu ortalayın ve son satırı sola hizalayın

Question

Birkaç satır içi bloğu yatay olarak ortalamak istiyorum, ancak aynı anda son satırında sola hizalama yapın (aşağıya bakın).

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

Sen http://jsfiddle.net/5JSAG/ bazı örnek HTML görebilirsiniz: Böyle bir şey isterken

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

:

sorun böyle bir şey (http://jsfiddle.net/5JSAG/) elde olmasıdır.

Ben column-count ve column-width kullanarak denedi ama bunu istediğiniz gibi blok sırasının değiştiği, çünkü çalışmaz:

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

Answer 1

:

Bir örnek sadece hizalanır bloklar ile aynı genişlikte olan ucunda bir dolgu div'leri ekleyin.

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

onları Yüzer burada en iyi seçenek gibi görünüyor. Solda ve sağda boşluk bırakmanız gerekiyorsa konteynere sol/sağ kenar boşlukları koyabilirsiniz veya konteynere genişlik ve otomatik sol ve sağ kenar boşlukları verebilirsiniz.

Bu, aynı zamanda, sıralanmamış bir liste olarak marj etmeye değer gibi gözüküyor. Bu sorun için oldukça basit bir çözüm bulunamamıştır

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