Cómo crear columnas mediante etiquetas DIV

Por randall shatto

Paso 1

Agrega el código "<div style ='" para cada línea por separado de las columnas. Esto explica el propósito del código inicial.


Paso 2

Introduce los píxeles de alto, ancho y bordes. El código se mostrará como "<div style = 'height: 550px; width: 220px; border: 3px". Si no deseas un borde alrededor de tus columnas, establece el píxel del borde a cero.


Paso 3

Ajusta el color del borde. Puedes utilizar los mismos colores o diferentes. Usa "solid" o "double" para el tipo de borde. Tu código será similar "<div style='height: 550px; width: 220px; border: 3px solid black;".


Paso 4

Añade la alineación. El comando "Float" permite alinear las columnas adicionales junto a la primera columna. Inserta "float: (direction);" para la etiqueta DIV de alineación. El código hasta este punto es "<div style='height: 550px; width: 220px; border: 3px solid black; float: left;".


Paso 5

Cerrar la etiqueta DIV. Cierra el código con "'>", luego, termina con </div>. Por ejemplo, el código completo está en este formato "<div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </ div>".


Paso 6

Agrega otra columna al lado de la primera con otra etiqueta DIV. Por ejemplo, si quieres cuatro columnas de una fila, este sería el código: <div style='height: 550px; width: 220px; border: 3px solid black; float: left;'> </ div> <div style='height: 550px; width: 220px; border: 3px solid green; float: left;'> </ div> <div style='height: 550px; width: 220px; border: 3px solid blue; float: left;'> </ div> <div style='height: 550px; width: 220px; border: 3px solid red; float: left;'> </ div>