hola estoy intentando hacer una pagina que contenga un texto con marco que envuelva una imagen a su derecha o a su izquierda, tal como la imagen
sin utilizar js, puro html y css
hola estoy intentando hacer una pagina que contenga un texto con marco que envuelva una imagen a su derecha o a su izquierda, tal como la imagen
sin utilizar js, puro html y css
primero a la etiqueta <img>
recuerda siempre envolverla con la etiqueta <figure>
, eso es para que los navegadores sepan que es una imagen.
Lo segundo y muy importante es que a la etiqueta <figure>
le pongas con css la propiedad float:right;
, con esto rompes el flujo de el orden por defecto del código y por ende cumplirás tu propósito.
Te recomiendo aprender de html, css y javascript:
Ej mas claro:
figure {
float: right;
}
<div>
<figure>
<img src="images/pruebas.jpg" alt="">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos quae labore cumque debitis officiis hic harum aperiam et quasi? Minus, quo nulla, corporis dignissimos illo at aspernatur laborum placeat!</p>
</div>