0

estoy haciendo un diseño donde pongo un texto y una imagen con una información arriba de ella, pero me encuentro con el problema de que mi texto no se pone por debajo de la imagen cuando "puede" ya que mi propiedad flex no lo permite como se puede ver en la imagen:

introducir la descripción de la imagen aquí

El código html es el siguiente

<div className="profile">
  <div className="leftP">
    <h2>Detras del exito</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
  <div className="rightP">
    <h4>********</h4>
    <h6>CEO y Fundadora</h6>
    <img src={profilePhoto} alt="ProfilePhoto" />
  </div>

</div>

Y el css es el siguiente:

.profile {
  display: flex;
}
.leftP {
  display: flex;
  flex: 2;
  flex-direction: column;
}

.rightP {
  flex: 1;
  position: relative;
  margin-top: 0;
}

Mi pregunta es como hago para que mi texto luego del tamaño de mi div rightP se ponga por debajo de la imagen para que se vea de esta manera:

introducir la descripción de la imagen aquí

He intentado usando la propiedad flex-grow ya que tengo entendido que da tamaño y estaba intentando reducir el tamaño de esa columna pero no lo logre, no se si sea posible

4
  • O sea quieres que el texto vaya debajo de la imagen cuando el ancho de la pantalla sea chica? Me confirmas Commented el 23 ene. 2023 a las 21:39
  • Si, que vaya al lado pero a la vez que el texto se ajuste abajo de la imagen Commented el 23 ene. 2023 a las 21:55
  • Es necesario usar flex?
    – EvilFearzZ
    Commented el 24 ene. 2023 a las 0:04
  • no es necesario, pues lo hice de esa manera ya que es como pensé que sería bueno, por el tema del texto arriba de la imagen y de mas Commented el 24 ene. 2023 a las 0:29

1 respuesta 1

1

Cambié la estructura del HTML para obtener un resultado más cercano a lo que pides. Primero, los textos del rightP y la imagen lo moví todo en tu elemento leftP, en donde rightP ya no sería utilizado, quedando la siguiente estructura:

<div class="profile">
  <div class="leftP">
    <div class="titulos">
      <h2>Detras del exito</h2>
      <div>
        <h2>********</h2>
        <h4>CEO y Fundadora</h4>
      </div>
    </div>
    <p>
      <img class="img" src="https://i.imgur.com/wBWzOZo.png" alt="ProfilePhoto" width="350px" height="200px" />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
</div>

A la clase titulos les di las siguientes propiedades para que el contenido de adentro ocupe todo el ancho de la pantalla y estén separados en cada extremo (izquierda y derecha) con space-between:

.titulos {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: right;
  align-items: end;
}

Y tu imagen (que está dentro del párrafo), les di las siguientes propiedades para que la imagen estará ubicada siempre a la derecha, y el texto no sobrepasará la imagen y se irá abajo. También le di una pequeña separación de la imagen con el texto para que tenga un mejor resultado:

.img {
  display: block;
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
}

Código completo.

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.