CSS – Elenco su più colonne

Per creare un bell’elenco su 2 colonne tramite CSS e Coldfusion, quando l’altezza delle varie celle non è uniforme, io ho pensato a questo veloce script.

<cfset i=0>
<cfset numColonne = 2>
<cfoutput query="qry_news">

<cfset i=i+1>
<div style="float: left; width: 230px; margin: 0 20px 10px 0;">

<a href="news.cfm?id_news=#news#"><b>#titolo#</b></a><br>
#sottotitolo#<br>

</div>
<cfif i is numColonne ><br clear="left" /><cfset i=0></cfif>

</cfoutput>
<br clear="left" />

 

Come funziona.

i è un contatore per verificare quando andare a capo.

numColonne è il numero delle colonne in cui vogliamo suddividere lo spazio.

Il div è float a sinistra: porre attenzione che (la larghezza del DIV + i margini laterali) * il numero di colonne, sia inferiore allo spazio a disposizione.

<br clear="left" /> permette di andare a capo, dopo l’elemento float più lungo.

Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *