3

Necesito acomodar un parrafo de texto a la derecha de una imagen. Entiendo que puede hacerse de dos formas, tanto con float, como con Display inline block. Desafortunadamente no me estaria funcionando.

<main>
    <div>
        <img src="img/profile.jpg">
        <p id="text1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex     corrupti. Adipisci ex quis enim labore, consequuntur explicabo facilis? Corporis culpa adipisci eos numquam officiis perferendis eum vero? Necessitatibus, a.
        </p>
    </div>
</main>
#text1{
 display: inline-block;
 vertical-align: top;
}

Segun he estado viendo, si el texto tiene 50 caracteres se acomoda perfectamente a la derecha, pero al superar los 300caracteres ya no.

2 respuestas 2

1

Te aconsejo que uses Flexbox o CSS-Grid.

Si bien la propiedad float puede funcionar, es una regla basada en los estilos de CSS2, que fue hace mas de una decada y claramente hoy en dia presenta problemas de compatibilidad en algunos navegadores de dispositivos moviles, algo que Flexbox y CSS-Grid no.

Te dejo un articulo adicional del por que los Floats nunca fueron diseñados para el diseño por Eric A. Meyer:

Finalmente la solcuion a tu problema:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#text1{
 display: inline-block;
 vertical-align: top;
}

main div {
  display: flex;
}

main div img {
  margin-right: 1rem;
  width: 50%;
}
<main>
    <div>
        <img src="https://images.unsplash.com/photo-1633113216317-d0bb16e34e3d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
        <p id="text1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex     corrupti. Adipisci ex quis enim labore, consequuntur explicabo facilis? Corporis culpa adipisci eos numquam officiis perferendis eum vero? Necessitatibus, a.
        </p>
    </div>
</main>

Saludos !

0

Proba así:

#text1{float: left;}
0

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.