0

Me gustaría crear una caja donde a la izquierda haya una imagen y en la derecha un texto que quede alineado en el centro verticalmente, pero de modo que si el ancho de la caja contenedora se reduce, el texto ocupe varias lineas y no pase a ocupar el espacio de debajo de la imagen. Algo así:

introducir la descripción de la imagen aquí

1
  • 1
    Agrega tu código y comparte que has intentado por favor
    – user128299
    Commented el 22 sept. 2020 a las 12:39

2 respuestas 2

1

Si bien la respuesta anterior debería solucionar tu problema con la propiedad display: flex; yo te recomiendo que a tu div que envuelve la imagen le agregues la propiedad flex-shrink: 0;

Aqui te dejo un enlace para que profundices mas sobre flex-shrink

Propiedad flex-shrink CSS

ya que al ser tu contenedor una caja flexible los elementos se contraerán para estar dentro de tu contenedor y es posible que tu imagen se vea "apretada" Te dejo un ejemplo práctio para que puedas ver la propiedad flex-shrink en accion.

Lo recomendable es que cuando la pantalla del dispositivo es muy pequeña, el texto pase a la parte inferior de la imagen puede que te interece investigar mas sobre la propiedad flex-direction: te dejo el enlace para que profundices mas en el tema. Propiedad flex-direction CSS

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

body{
    width: 100%;
    min-height: 100vh;
    background: #f2f0f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-principal{
    width: 80%;
    max-width: 600px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.imagen{
    flex-shrink: 0;
    width: 150px;
}

.imagen img{
    width: 100%;
}
<div class="caja-principal">
        <div class="imagen">
            <img src="https://images.vexels.com/media/users/3/145821/isolated/preview/44247e29bf035ece825b8b2bf8af88c2-ilustraci--n-de-cohete-ilustraci--n-de-cohete-by-vexels.png" alt="">
        </div>
        <div class="texto">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique veritatis reiciendis sunt. Quasi ab numquam exercitationem 
        </div>
    </div>

0

puedes lograr ese efecto usando flexbox css asignando a tu contenedor la propiedad display: flex;

Esto cambia el tipo de bloque con el que estás trabajando, para un vistazo más profundo a estas definiciones te recomiendo css-tricks

En resumen tendrias que encerrar tus elementos de imagen y texto dentro de un contenedor cada una y estos dos dentro de otro así:

<body>
<div class="caja">
    <div class="imagen">
        <img src="img/32.jpg" alt="">
    </div>
    <div class="texto">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut illo error fugit quis repudiandae quibusdam illum ipsam accusantium deserunt totam, velit culpa sit, in aliquid quia praesentium possimus ut? Enim?</p>
    </div>
</div>

Y en tu archivo css le asignas las siguientes propiedades a cada uno:

.caja {
    display: flex;
    flex-wrap: nowrap; /*Esta propiedad se añade por defecto a una caja flex así que está de más especificarla*/
    align-items: center;
}

.texto {
    width: 300px;
    margin-left: 10px;
}

Display flex: cambia el tipo de contenedor con el que trabajas flex-wrap: establece la capacidad de la caja de "envolverse" (o sea, que no se va a correr hacia abajo en caso de "no-wrap").

Align-items: alinea de forma horizontal los elementos con los que trabajas (funciona con objetos flex por eso definimos los div como display: flex; y encerramos lo que necesitamos manipular dentro de los mismos).

Mi explicación aunque un poco vaga, espero que te haya ayudado, revisa el link que te dejé más arriba para que tengas una explicación a fondo de lo que es flexbox y de paso aprendes una gran herramienta para el desarrollo de sitios web responsive.

2
  • 1
    Hasta donde yo se, por defecto esto ya esta flex-wrap: nowrap; hasta que definas lo contrario, es decir está demás
    – user128299
    Commented el 22 sept. 2020 a las 13:33
  • @BetaM sí, tienes toda la razón, no me había percatado de eso! Commented el 22 sept. 2020 a las 13:36

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.