Cómo crear columnas mediante etiquetas DIV

Escrito por randall shatto | Traducido por daniel gómez villegas
Cómo crear columnas mediante etiquetas DIV

Las etiquetas DIV tienen una gama más amplia de funciones que las etiquetas HTML comunes. Creas una página web versátil cuando utilizas este tipo de herramientas. Las tablas normales de HTML son difíciles de diseñar y no son tan flexibles. Las DIV son parte del documento HTML. Agrega estas etiquetas siempre que necesites colocar columnas dentro de tu página web. Una vez que tengas el color de fondo o la textura escrita en tu documento, colocarás las etiquetas DIV para crear las columnas.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 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.

  2. 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.

  3. 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;".

  4. 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;".

  5. 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>".

  6. 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>

Consejos y advertencias

  • Explora los diferentes atributos DIV para los diversos estilos de columnas.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media