Saltar al contenido

html css: ¿cómo crear una lista de varias columnas?

Hacemos una revisión exhaustiva cada post en nuestro sitio web con la meta de mostrarte en todo momento información más veraz y actualizada.

Solución:

Si no te importa el orden vertical, sino solo el diseño:

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

Simplemente puede configurar los elementos li de esta manera:

li 
    display: block;
    width: 25%;
    float: left;

Deberia de funcionar. Si necesita tenerlos en orden vertical, debe actuar en el script php dividiéndolos en divs separados y luego flotarlos.

En un mundo perfecto, podría usar el módulo de columna css3, pero lamentablemente actualmente solo es parcialmente compatible con los navegadores webkit y gecko (usando -webkit y -moz).

Hubo un artículo en A List Apart hace un tiempo que cubría exactamente esta pregunta. Supongo que si lo que se menciona allí no es suficiente, por supuesto, siempre puede volver a la codificación del lado del servidor o la codificación del lado del cliente para dividir la lista automáticamente en tres partes.

Reseñas y puntuaciones

Acuérdate de que tienes la capacidad de decir si diste con la respuesta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : / /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *