Aprenda a hacer que el texto se ajuste a una imagen flotante con CSS.
Para hacer que su texto se ajuste a la imagen de la derecha, de manera similar a como está en la foto que presenta este artículo, use una regla CSS como esta:
La regla flotante: izquierda hace que la imagen se mueva hacia el margen izquierdo. La regla de relleno derecho evita que el texto choque contra el lado derecho de la imagen. Si se agrega un borde a esta imagen, el relleno se colocaría entre la imagen y el borde. Consulte la Sección 2 para trabajar con una imagen con borde.
A continuación, agregue márgenes a la izquierda y a la derecha de la imagen para centrarla. El valor adecuado para los márgenes izquierdo y derecho para centrar cualquier cosa es automático.
Para crear un borde grueso en forma de marco usando el estilo de borde de ranura, se puede usar una regla como esta:
Otros estilos de borde son sólidos, punteados, discontinuos, doble, cresta, insertada y inicial. El ancho se puede expresar en píxeles, ems o porcentajes.
Los bordes se pueden aplicar de forma selectiva a la parte superior, derecha, inferior e izquierda de la imagen. Puede utilizar este conocimiento para crear un efecto como una sombra paralela.
Usando un borde sólido en 2 tonos de gris solo en el borde derecho e inferior, obtienes un efecto de sombra paralela.
img {flotar: izquierda; border-right-style: sólido; border-right-width: 8px; color del borde derecho: #CCCCCC; borde-fondo-estilo: sólido; border-bottom-width: 8px; color del borde inferior: # 999999; margen derecho: 1em; margen inferior: 1em; }
Propina
Si tiene imágenes en más de una división (div) de una página, use selectores descendientes para diseñarlas individualmente. Posibles selectores: #content img, #sidebar img, #feature img.
