distanza verticale fra elementi

[francopeci@yahoo.it]

Chiedo se sia possibile, usando liste con width fissati e con display:inline-block, fare in modo che quando un elemento va a capo si posizioni sotto l'elemento superiore senza lasciare spazi bianchi di altezza variabile.
Ecco i due esempi che ho realizzato:
http://www.parrocchiaborno.it/xindex.htm
Il primo dipende sostanzialmente dal seguente css:
.boxavvisi2 {
margin:0;
padding:0;
}
.boxavvisi2 li {
display:inline-block;
width:250px;
margin: 0 3px 6px 3px;
padding:4px;
margin: 0 3px 6px 3px;
padding:4px;
vertical-align:top;
border:1px solid #b0b0b0;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
}

Il secondo esempio che produce la grafica desiderata, invece, è stato realizzato distribuendo parte degli avvisi in un div width:50% e i rimanenti in un altro div float.
Mi chiedevo se fosse possibile realizzare la stessa grafica con un unica lista <li>...</li>, ottenendo una cosa simile a questo sito:
http://www.qoop.it/installare-unity-su-debian
Ringrazio chiunque vorrà offrire il proprio contributo, scusandomi se è un problema già affrontato.
Ciao
Franco

 

[criric]

Ciao, non sono sicuro della compatibilità per tutti i browser

<style>
    ul {
        list-style-type: none;
        margin:0;
        padding:0;
    }
    ul li {
        float:left;
    }
    ul li:nth-child(2n+1) {
       float:right;
    }
</style>
<div style="overflow: hidden;width:244px;border:1px solid red">
    <ul>
        <li style="width:120px;height:90px;border:1px solid black"></li>
        <li style="width:120px;height:120px;border:1px solid black"></li>
        <li style="width:120px;height:50px;border:1px solid black"></li>
        <li style="width:120px;height:180px;border:1px solid black"></li>
        <li style="width:120px;height:150px;border:1px solid black"></li>
        <li style="width:120px;height:80px;border:1px solid black"></li>
    </ul>
</div>

l'esempio che hai postato cmq usa i div