Como conseguir con CSS Listados Multi-Columnas (+ Ejemplo con PHP)
Hace poco he querido conseguir diseñar una lista no ordenada de elementos (etiqueta UL en HTML) en varias columnas, dependiendo del número de elementos (LI, list items). Encontré en está pagina un truco bastante sencillo para conseguirlo. Pero en esa página solo muestran la idea para conseguirlo y no un ejemplo práctico para conseguir un listado en columnas de forma dinámica.
En el siguiente código veréis como conseguir a través de PHP, ejemplos como este:
public function showMultiColum(){ $fuenteDatos = new FuenteDatos(); $query = "SELECT * FROM table_of_elements"; $resulset = $fuenteDatos->getData($query); $total_elements = $fuenteDatos->getRowCount(); $num_cols = 3; //number of columns $rows_x_cols = ceil (($total_elements / $num_cols)); $i_col = 1; $i_list_item = 0; $class ="column1"; echo <<<MARCA | <ul style="display:block;"> MARCA; while($row = mysql_fetch_array($resulset)){ $i_list_item ++; $nombre = $row['name'] ; echo <<<MARCA <li class="$class" > $nombre</li> MARCA; if ( ($i_list_item % $rows_x_cols) ==0 ){ $i_col++; $class= "column${i_col} reset"; }else{ $class = "column${i_col}"; } } echo <<<MARCA | </ul> MARCA; } |
