¿Has visto que los anuncios de sitios web grandes se colocan en el medio del contenido para envolver el texto? Generalmente, los anuncios de sitios web pequeños comunes solo se pueden colocar al principio o al final del contenido. Tal vez el sistema cms de los sitios web grandes lo tenga. esta función Los conceptos básicos de cms comúnmente utilizados por nuestros sitios web pequeños No existe tal función, porque es imposible agregar automáticamente una etiqueta publicitaria a la etiqueta de contenido, a menos que la edite manualmente al agregar un artículo, lo cual no es agotador.
Nunca pensé en usar CSS para controlarlo, principalmente porque no esperaba el atributo claro. Accidentalmente vi una introducción hoy y me di cuenta de que es muy simple implementar el ajuste de texto.
Ejemplo de código:
<div style="float:left;height:300px;width:0">Una capa en blanco con un ancho de 0, utilizando la altura de esta capa para controlar las posiciones superior e inferior de la capa publicitaria</div>
<div style="float:left;height:250px;width:250px;clear:left;">Código publicitario</div>
</div>
La clave radica en el papel de clear:left. Clear tiene tres atributos: clear:both, clear:left y clear:right, que indican respectivamente la limpieza de los bloques flotantes en ambos lados, izquierda y derecha. Agregar clear:left a la capa publicitaria significa que la capa ya no flotará en relación con la capa en blanco y se moverá hacia abajo. Es genial, jaja.
Comparemos:
<div style="float:left;height:300px;width:100px;background:#CCC;">Agregue ancho y fondo para facilitar la observación del efecto</div>
<div style="float:left;height:250px;width:250px;">Si elimina el flotador transparente, comprenderá su significado</div>
</div>
Si agregas este:
Desafortunadamente, la prueba anterior encontró que solo IE es factible. Firefox y Opera tienen resultados diferentes. El efecto de IE es que la imagen se mueve hacia abajo automáticamente cuando se encuentra con la capa publicitaria. Firefox no se moverá hacia abajo, pero no cubrirá la capa publicitaria. porque la capa publicitaria está al frente. En la ópera, la imagen no se moverá hacia abajo y cubrirá la capa publicitaria.
Mejorado de nuevo:
Finalmente está hecho, es bastante perfecto y el efecto del contenido publicitario circundante ahora está completo :)
//2008-02-29, modificado por: ¿Qué es?
Olvidé agregar
| <estilo>.news{float:left;}</estilo> |
Alguien preguntó si el texto debería ajustarse en la parte superior e inferior derecha, así que lo cambié de la siguiente manera:
<div estilo="float:izquierda;"> </div> |