Computación y electrónica

Cómo alinear divs horizontalmente en CSS

Escrito por ameen aliyar | Traducido por beatriz sánchez
Cómo alinear divs horizontalmente en CSS

Las etiquetas div HTML han eliminado la necesidad de usar tablas para el diseño de páginas.

Comstock/Comstock/Getty Images

Las etiquetas div HTML definen el diseño de páginas web. Las hojas de estilo en cascada se usan para diseñar etiquetas HTML dentro de páginas web. La propiedad "id" o "class" de las etiquetas HTML se llaman dentro del CSS para alpicar determinados estilos a las etiquetas HTML. Los estilos que son habituales en varias etiquetas div pueden ser asignadas a una propiedad "class", mientras que los estilos únicos deben ser asignados la propiedad "id" de una etiqueta div determinada, ya que cada etiqueta id puede ser usada sólo una vez. Los elementos div adyacentes aparecerán debajo del elemento div que le precede por defecto si no se modifica el diseño para alinear horizontalmente.

Nivel de dificultad:
Moderada

Otras personas están leyendo

Necesitarás

  • Un editor de texto

Lista completaMinimizar

Instrucciones

    Define las posiciones absolutas de las etiquetas div

  1. 1

    Abre la página HTML y une el archivo CSS a dos ventanas distintas en un editor HTML básico o editor de texto, como Notepad.

  2. 2

    Busca todas las etiquetas div que necesitas alinear y asigna el nombre de clase único "halign": <div class="halign">Primer div</div> <div class="halign">Segundo div</div> <div class="halign">Tercer div</div> Si "halign" ya se ha usado como nombre de clase en otro lugar en el HTML, usa un nombre distinto, pero asegúrate de que es único.

  3. 3

    Asigna los nombres "id" para todos los elementos div que debes alinear. Incluye número dentro de los nombres "id" para identificar el orden de lugar. De forma alternativa, asigna "box1", "box2" y así sucesivamente como nombres "id": <div id="box1" class="halign">Primer div</div> <div id="box2" class="halign">Segundo div</div> <div id="box3" class="halign">Tercer div</div> Si los nombres "id" ya han sido asignados, entonces toma nota de los nombres "id" existentes.

  4. 4

    Ve al archivo CSS e inserta: .halign { position: absolute; top: XXX; } Cambia "XXX" por el valor del margen entre la parte superior absoluta y la línea de alineamiento horizontal. Usa valores de píxeles o porcentajes, dependiendo de los otros elementos div que están colocados sobre la clase "halign".

  5. 5

    Edita los bloques de estilo div individuales en el CSS. Encuentra los nombres "id" de div en el CSS y añade la línea de código "left: YYY;" dentro de cada bloque de código. Cambia "YYY" dentro de los márgenes absolutos a la izquierda de los elementos div. El margen absoluto es el espacio total desde el borde de la pantalla del navegador hacia el div correspondiente. Los márgenes subirán por div para colocarlos uno al lado del otro: #box1 { margin-left:100px; } #box2 { margin-left:400px; } #box3 { margin-left:700px; }

    Deja flotando los elementos DIV

  1. 1

    Abre el archivo CSS en una ventana de editor de textos.

  2. 2

    Define un nombre "class" único, como "halign", e inserta "float:left;" en el bloque de código y guarda el archivo.

  3. 3

    Abre el HTML en una ventana de editor de texto distinta y asegúrate de que todos los elementos div que necesitas alinear están colocados de forma adyacente.

  4. 4

    Une el nombre "class" a "halign" a los elementos div adyacentes que necesitan ser alineados.

  5. 5

    Coloca el siguiente código sobre el grupo de elementos div en el HTML: <div style="clear: both;"></div>

Consejos y advertencias

  • Si algún nombre de clase ya ha sido asignado a cualquier div correspondiente, inserta los nombres de clase adicionales y sepáralos con un carácter de espacio. Usa porcentajes para los valores del margen y el espacio si la página web general tiene una anchura fluida, y los bloques de diseño y márgenes cambiarán ellos mismos de tamaño según el tamaño y resolución de la pantalla. Diseña elementos en páginas web de anchura fija que no sean responsables del tamaño y resolución de la pantalla, y los valores de píxeles adecuados para los márgenes.
  • Determinado código CSS produce comportamientos únicos con distintos navegadores. Debes probar la compatibilidad con otros navegadores para todo el código CSS y HTML. No probar esto puede dificultar la accesibilidad y usabilidad de la página web.

Más galerías de fotos

comentarios

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-2014 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