0

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 introducir la descripción de la imagen aquí

sin utilizar js, puro html y css

2
  • Por favor mira esta demo y dime si esto es lo que quieres: codepen.io/enxaneta/pen/…
    – enxaneta
    Commented el 12 jul. 2020 a las 18:26
  • hola, mucha gracias por responder, era eso lo que queria hacer, pero sin utilizar js, puro html y css
    – jag
    Commented el 12 jul. 2020 a las 20:29

1 respuesta 1

0

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>

1
  • gracias por tu ayuda, pero lo que necesito es marcar el borde del texto.el primer intento que hice fue en un div puse la imagen con estilo float right y un parrafo que envolvio a la imagen sin problemas, solo me falta hacer en CSS el borde al parrafo.
    – jag
    Commented el 12 jul. 2020 a las 22:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.