-
Cómo hacer una envoltura alrededor del contenido DIV
-
Envolver una sección DIV con código HTML y CSS le permite crear un efecto visual, que revistas y periódicos utilizan comúnmente, donde el texto rodea una imagen. Un DIV representa una etiqueta <div>, que define una sección o división en un archivo HTML. Realizar el efecto de envolver mediante la creación de dos clases CSS que utilizan la propiedad "flotante" y tienen dimensiones fijas. A continuación, deberá de colocar con cuidado las dos clases alrededor de su contenido en el cuerpo de su archivo HTML.
Instrucciones
1 Abra el archivo HTML en un editor de texto como el Bloc de notas de Windows.
2 Agregue el siguiente código CSS en la sección <head> de su archivo HTML para manejar las propiedades de estilo del área de contenido envuelto:
<Style type = "text / css">
p {text-align: justify; line-height: 18px;}
.mywrapdiv {width: 350px; padding: 0 6px; flotador izquierdo;}
.mycontent {width: 180px; altura: 150px; padding: 6px; flotar derecho;}
</ Style>
La línea de "p" establece las propiedades de estilo para el texto que se envuelve alrededor de su contenido. La línea ".mywrapdiv" establece las propiedades de estilo para la sección exterior <div> que contiene dos áreas de contenido en su interior. La línea "Mi contenido" establece las propiedades de estilo para el contenido que desee para envolver alrededor. La parte importante del código es establecer las propiedades de "flotar", para ambas clases y para especificar un ancho fijo y altura para el área de contenido que desea envolver alrededor.
3 Agregue el código HTML para manejar el área de contenido de envolver escribiendo el siguiente código en el cuerpo de su archivo HTML:
<Div class = "mywrapdiv">
<P> Área de contenido # 1 ----- algún texto se ajuste alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor. <Span class = "Mi contenido"> Contenido de la zona # 2 </ span> un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de un poco de texto para envolver alrededor de algunos </ p >
</ Div>
Un <div> es un elemento en bloque, por lo que no puede incluirlo dentro de una sección <p>. Una etiqueta <span> está permitido porque está definida en línea en lugar de a nivel de bloque.
4 Guarde el archivo HTML y cargarla en el servidor para ver el área de contenido de envoltura.
