-
Cómo hacer un div flotante
-
elementos de posicionamiento div en un sitio web puede ser un reto, especialmente si quieres flotar divs a un lado de una página Web. Usted puede encontrar este tipo de posicionamiento útil para añadir logotipos de la parte izquierda de la página o anuncios a la derecha. Cascading Style Sheets que esto sea posible. Al aprender a añadir CSS propiedades "flotar" a sus elementos div, puede crear diseños de página estructurados que se adapten a sus necesidades de diseño.
Instrucciones
1 Lanzar su editor de HTML y abrir un documento HTML.
2 Pegue el siguiente código CSS en la sección del documento "<head>":
<Style type = "text / css">
.floatLeft {float: left; altura: 100px; Anchura: 100px; margen: 5px; background-color: amarillo;}
</ Style>
La primera clase CSS, llamado "floatLeft," contiene un "float: left" propiedad. Esto hace que los elementos de página que utilizan la clase a flotar hacia el lado izquierdo de su contenedor. En este caso, el contenedor es la página Web. Las propiedades de altura y anchura establecen las dimensiones de la div. El: la propiedad "margen 5px" coloca un margen de 5 píxeles alrededor de la div. Esto es útil cuando es necesario agregar espacio entre los divs. Cambiar el valor de "5" para cualquier número que desee. Los números más grandes aumentan el espacio entre divs. El color de fondo simplemente hace que el color de fondo del div amarilla. Esto le ayuda a ver los divs durante las pruebas.
3 Añadir las siguientes definiciones de clase CSS a continuación el código que aparece en el paso anterior:
.floatRight {float: right; altura: 100px; Anchura: 100px; margen: 5px; background-color: amarillo;}
.clear {clear: both;}
</ Style>
La clase "floatRight" hace que los elementos de página que utilizan esta clase de flotar a la parte derecha de sus contenedores. Tenga en cuenta la clase de "claro". Esta clase es útil para la "limpieza" de un flotador. Se hace que el navegador para colocar nuevos elementos de la página en una nueva línea en lugar de apilarlos uno junto al otro. Va a ver esto en acción cuando ve la página Web.
4 Agregue el siguiente código HTML en el documento de "<body>" sección:
<Div class = "floatLeft">
<H1> Título 1 flotaban a la izquierda </ h1>
</ Div>
<Div class = "floatRight">
<H1> Título 2 flotaron hacia la derecha </ h1>
</ Div>
<P class = "clear"> </ p>
Esto crea divs que hacen referencia a la "floatLeft" y "clases CSS floatRight". El navegador anclar la primera div a la parte izquierda de la página Web y el segundo div a la derecha.
5 Pega este último bloque de código HTML el código que aparece en el último paso::
<Div class = "floatLeft">
<H1> Título 1 flotaban a la izquierda </ h1>
</ Div>
<Div class = "floatleft">
<H1> Título 2 flotaban a la izquierda </ h1>
</ Div>
<Div class = "floatleft">
<H1> Título 3 flotaban a la izquierda </ h1>
</ Div>
<P class = "clear">
Este ia un párrafo. Este ia un párrafo. Este ia un párrafo. Este ia un párrafo. Este ia un párrafo.
</ P>
Esto crea tres elementos div. Cada uno de ellos hace referencia a la clase CSS "floatLeft", haciendo que cada div posicionarse inmediatamente a la derecha de la div anterior. Estos tipos de diseños son útiles para la creación de pantallas simétricas, tales como galerías de imágenes. Podría, por ejemplo, reemplazar el "<h1>" etiquetas de título dentro de cada div con etiquetas "img" para crear una fila de imágenes equidistantes,
La etiqueta final "<p>" crea un párrafo. Se hace referencia a la clase "clara". Si no lo hizo referencia a esa clase, el párrafo se aparecerá a la derecha de la tercera div en la misma línea. Para hacer que el párrafo aparece en una línea propia por debajo de los tres divs, debe utilizar la clase "clara". Que borra "flotar" el último de los elementos y permite que aparezca el párrafo en una nueva línea.
6 Guarde el documento y verlo en un navegador. Dos divs amarillas aparecen en la parte superior de la página Web. La primera flota en la parte izquierda de la página y aparece el segundo de la derecha. La línea siguiente muestra las tres divs que flotó hacia la izquierda. Se derivan de izquierda a derecha. El espacio entre ellos depende del valor del "margen" se define en el CSS. Debido a que borró los flotadores en los elementos de párrafo, que aparece debajo de los tres divs.
Consejos y advertencias
- Cuando usted flota múltiples elementos div a la izquierda, los navegadores intento de colocar a cada uno a la derecha de la div anterior. Si un nuevo div no encaja en la misma fila, un navegador que envuelve a la línea siguiente. Al crear clases de flotador que se aplican a divs, dar clases de esos valores "ancho" como se muestra en este ejemplo. .
