2

Estoy intentando maquetar esta estructura donde la imagen sobresale del contenedor a la izquierda, como si fuera un elemento "full width", mientras que la columna del párrafo respeta el max-width que le he dado al elemento contenedor padre.

Lo que busco es que el párrafo que está al lado de la imagen no se salga de la grilla delimitada por las líneas azules, como el primer párrafo, pero que la imagen sí que sobresalga.

introducir la descripción de la imagen aquí

La estructura HTML sería tal que así:

<div class="contenido">
    <div class="contenedor-max">

        <p>Párrafo 1</p>

        <div class="seccion">
            <img src="https://lorempixel.com/1920/1080/"/>
            <p>Párrafo de ejemplo</p>   
        </div>

        <div class="seccion">
            <img src="https://lorempixel.com/1920/1080/"/>
            <p>Párrafo de ejemplo</p>   
        </div>

        <p>Párrafo 2</p>

    </div>
</div>

Y el CSS:

.contenido {
    width: 100%;
}    

.contenedor-max {
        margin: 0 auto;
        max-width: 1100px;
 }

 .seccion {
        align-items: center
        display: flex;
}
0

1 respuesta 1

1

Edición

Quite la idea de CSS Grid y traté de lograrlo con FlexBox

Estuve probando algunos cambios para tratar de igualar la maquetación que buscas y lo que se me ocurrió fue lo siguiente:

  • Un contenedor principal que envolverá:
    • Dos divs que servirán de columnas
    • una etiqueta p que nos servirá para tener los párrafos
    • un div después del párrafo que envuelve a una etiqueta img para lograr tener un contenido que se salga del contenedor principal
  • Al contenedor principal dale estas propiedades:
    • Un ancho máximo del 95%
    • Centralo con margin: 0 auto;
    • Aplicale display: flex; esto para que ambos div se acomoden uno a lado del otro y generen las columnas
  • A los div que contienen las imágenes aplicales un ancho máximo del 100% para que se ajuste a su contenedor y la imagen no rompa la estructura
  • Para sacar a las imágenes de su contenedor puedes hacer uso de margin e indicando en porcentaje o pixeles cuanto lo vas a mover

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        body{
          margin: 0;
        }
        .contenedor-principal {
          display: flex;
          max-width: 95%;
          margin: 0 auto;
        }
        .contenedor-principal__izquierda,
        .contenedor-principal__derecha {
          background: tomato;
          padding: 10px;
        }
        .contenedor-principal__izquierda {
          border-right: 1px solid white;
        }
        .contenedor-principal__imagen-izquierda img{
          margin-left: -20%;
          max-width: 100%;
        }
        .contenedor-principal__imagen-derecha img{
          margin-left: 20%;
          max-width: 100%;
        }
      </style>
    </head>
    <body>
    <div class="contenedor-principal">
      <div class="contenedor-principal__izquierda">
        <p class="contenedor-principal__parrafo">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quasi, odit. Harum nihil similique deleniti itaque dolor eaque dolores alias beatae commodi repellat. Deleniti perferendis ad quisquam aliquid iure quas!
        </p>
        <div class="contenedor-principal__imagen-izquierda">
          <img src="http://lorempixel.com/g/400/200/" alt="">
        </div>
        <p class="contenedor-principal__parrafo">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quasi, odit. Harum nihil similique deleniti itaque dolor eaque dolores alias beatae commodi repellat. Deleniti perferendis ad quisquam aliquid iure quas!
        </p>
        <div class="contenedor-principal__imagen-izquierda">
          <img src="http://lorempixel.com/g/400/200/" alt="">
        </div>
      </div>
      <div class="contenedor-principal__derecha">
        <p class="contenedor-principal__parrafo">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quasi, odit. Harum nihil similique deleniti itaque dolor eaque dolores alias beatae commodi repellat. Deleniti perferendis ad quisquam aliquid iure quas!
        </p>
        <div class="contenedor-principal__imagen-derecha">
          <img src="http://lorempixel.com/g/400/200/" alt="">      
        </div>
        <p class="contenedor-principal__parrafo">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque aspernatur consequatur molestiae! Itaque, commodi, ab nemo sint accusamus ut unde officiis, praesentium, officia a vero delectus blanditiis laudantium nesciunt doloremque!
        </p>
        <div class="contenedor-principal__imagen-derecha">
          <img src="http://lorempixel.com/g/400/200/" alt="">      
        </div>
      </div>
    </div>
    </body>
    </html>

3
  • Hola! La respuesta que has dado es exactamente lo que estaba haciendo con flex, pero eliminando el contenedor con max-width, pero eso no es lo que busco. Lo que busco es que el párrafo que está al lado de la imagen no se salga de la grilla delimitada por las líneas azules, como el primer párrafo, pero que la imagen sí que sobresalga. Un saludo!
    – Pablo
    el 3 ene. 2020 a las 9:46
  • @Pablo deja ver qué puedo hacer
    – user128299
    el 3 ene. 2020 a las 9:52
  • @Pablo espero la edición te sea de ayuda
    – user128299
    el 3 ene. 2020 a las 13:19

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.