Come flottare div in CSS?

Question

Ho questo elenco in HTML e vorrei ordinarlo per colonne. Ho provato ad utilizzare carri mi dà questo:

EDIT: altezza di queste <li> non è definito, ma vorrei C inferiore a B, E sotto E e G sotto F, senza modificare la struttura e cambiare l'ordine. Non voglio usare la posizione assoluta. Mi chiedo se ci sono altre soluzioni.

HTML:

<ul> 
    <li class="item">A</li> 
    <li class="item">B</li> 
    <li class="item">C</li> 
    <li class="item">D</li> 
    <li class="item">E</li> 
    <li class="item">F</li> 
    <li class="item">G</li> 
<ul> 

USCITA (utilizzando float: left; width: 240px; border-left: 1px solid #EEE):

Quello che voglio è più simile a questo qui di seguito, senza modificare il codice HTML perché Io già uso questo st struttura per rendere reattivo.

è possibile?

Answer 1

È possibile utilizzare la colonna CSS e un margine inferiore sul primo tag LI, like this.

ul { 
    column-count:4; 
    padding:0; 
    column-rule: solid lightgray 1px; 
} 

li { 
    display:inline-block; 
    width:100%; 
} 

li:before {/* demo purpose to set an height to lis */ 
    content:''; 
    float:left; 
    padding-top:50%; 
} 

li:first-of-type { 
    margin-bottom:50%; 
} 

Potrebbe essere necessario un prefisso JavaScript o aggiungere manualmente il prefisso del venditore.