etiquetas HTML div definen el diseño de las páginas Web. las hojas de estilo en cascada se utilizan para estilizar etiquetas HTML dentro de las páginas Web. El "id" o la propiedad "clase" de las etiquetas HTML se denominan dentro de CSS para aplicar ciertos estilos de etiquetas HTML. Estilos que son comunes a varias etiquetas div pueden ser asignados a una propiedad "clase", mientras que los estilos únicos se deben asignar a la propiedad "id" de la etiqueta div en particular, ya que cada etiqueta de identificación puede se puede utilizar sólo una vez. elementos div adyacentes aparecerán debajo del elemento div que precede de forma predeterminada a menos de estilo para alinear horizontalmente.
Instrucciones
Definir posiciones absolutas de etiquetas div
1 Abra la página HTML y el archivo CSS adjunta en dos ventanas diferentes en un editor básico editor de HTML o texto, como el Bloc de notas.
2 Localizar todas las etiquetas div que necesita ser alineado y asignar el nombre de la clase única "halign":
<Div class = "halign"> Primera div </ div>
<Div class = "halign"> Segunda div </ div>
<Div class = "halign"> Tercera div </ div>
Si "halign" ya ha sido utilizado como un nombre de clase en otro lugar en el HTML, utilice un nombre diferente, pero asegúrese de que es única.
3 Asignar nombres "ID" para todos los elementos div que necesitan ser alineados. Incluir números dentro de los nombres "ID" para identificar el orden de colocación. Alternativamente asignar "box1", "caja2" y así sucesivamente como "nombres id":
<Div id = clase "box1" = "halign"> Primera div </ div>
<Div id = clase "caja2" = "halign"> Segunda div </ div>
<Div id = clase "box3" = "halign"> Tercera div </ div>
Si ya se han asignado nombres "ID", a continuación, tomar nota de los nombres "ID" existentes.
4 Ir al archivo CSS y añade lo siguiente:
.halign {position: absolute; arriba: XXX; }
Reemplazar "XXX" con el valor del margen entre la parte superior absoluta y la línea de alineación horizontal. Utilice los valores de píxeles o porcentajes, en función de otros elementos div que se colocan encima de la clase "halign".
5 Editar bloques de estilo div individuales en el CSS. Encontrar los nombres div "id" en el CSS y añadir la "izquierda: YYY;" línea de código dentro de cada bloque de código. Reemplazar "YYY" con los márgenes absolutos a la izquierda de los elementos div. margen absoluto es el espacio total desde el borde de la pantalla del navegador hacia la div correspondiente. Los márgenes van a subir por div que debe colocar al lado del otro:
box1 {margin-left: 100px; } Caja2 {margin-left: 400px; } Box3 {margin-left: 700px; }
Flotar los elementos DIV
6 Abra el archivo CSS en una ventana de editor de texto.
7 Definir un nombre único "clase", como por ejemplo como "halign," e insertar "float: left;" en el bloque de código y guardar el archivo.
8 Abrir el HTML en una ventana de editor de texto diferente y asegurarse de que todos los elementos div que necesitan ser alineados se colocan de forma adyacente.
9 Coloque el nombre de "clase" "halign" para los elementos div adyacentes que necesitan ser alineados.
10 Coloque el siguiente código encima del grupo de elementos div en HTML:
<Div style = "clear: both;"> </ div>