Tengo un div de texto de clase que contiene texto con flex como pantalla y tengo otro div llamado imágenes que tiene 4 imágenes alineadas usando la visualización de cuadrícula. Mi preocupación es que no puedo tenerlos en el mismo nivel. Si le doy al contenedor de texto una propiedad de margen superior para alinearlo con el contenedor de la imagen, el contenedor de la imagen también baja y me deja con una alineación desigual.
.text { width: 50%; padding-top: 30px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 20px; grid-area: text; } .text>h2 { text-align: left; } .text>p { line-height: 1.5em; height: 6em; /* height is 2x line-height, so two lines will display */ overflow: hidden; } .images { float: right; width: 50%; display: grid; grid-template-areas: "aaaabbbb" "ccccdddd"; gap: 10px; align-items: center; /* left and right */ justify-content: center; } img { width: 350px; height: 200px; } .img1 { grid-area: a; } .img2 { grid-area: b; } .img3 { grid-area: c; } .img4 { grid-area: d; } <div class="text"> <h2>Straight from the oven</h2> <p>Pizza is the world's greatest food. Nothing says “I love you,” “I'm sorry,” or “Let's be friends,” better than pizza. It's a universal love language, and is perfect at any time, for any occasion, especially when you don't know what to say. Here at The Corleone's we understand your sentiments and will give a taste you can never stop singing praises of!</p> </div> <div class="images"> <img src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg" alt="" class="img1"> <img src="https://listerr.in/wp-content/uploads/2021/03/pizza_hut.5a98457c37496.png" alt="" class="img2"> <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F9%2F2021%2F06%2F15%2Fmozzarella-pizza-margherita-FT-RECIPE0621.jpg&q=85" alt="" class="img3"> <img src="https://media.istockphoto.com/photos/picking-slice-of-pepperoni-pizza-picture-id1133727757?k=20&m=1133727757&s=612x612&w=0&h=WAx4F4efU3Yx3Qu15iUgTMtB7G_kbmh-DqAvL4aNfeE=" alt="" class="img4"> </div>He estado practicando desarrollo web durante 2 meses. ¡Cualquier ayuda u orientación sería muy apreciada! ¡Gracias una tonelada!
Entonces, no estoy completamente seguro de si esto es lo que busca, pero lo que deduje es que desea que sus dos divs principales se muestren en la misma capa. Para esto, acabo de encerrar ambos elementos en un contenedor flexible y eliminé las áreas de plantilla de cuadrícula, que aún puede usar si lo desea.
También eliminé la propiedad "Flotante" porque a menudo puede estropear muchas otras funciones de diseño, espero que ayude y, si no, hágame saber cómo puedo mejorar la respuesta.
.containing_div { display: flex; } .text { width: 50%; padding-top: 30px; display: inline-flex; flex-direction: column; flex-wrap: wrap; gap: 20px; grid-area: text; } .text > h2 { text-align: left; } .text > p { line-height: 1.5em; height: 6em; overflow: hidden; } .images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-content: center; align-items: center; } img { width: 350px; height: 200px; } <div class="containing_div"> <div class="text"> <h2>Straight from the oven</h2> <p>Pizza is the world's greatest food. Nothing says “I love you,” “I'm sorry,” or “Let's be friends,” better than pizza. It's a universal love language, and is perfect at any time, for any occasion, especially when you don't know what to say. Here at The Corleone's we understand your sentiments and will give a taste you can never stop singing praises of!</p> </div> <div class="images"> <img src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg" alt="" class="img1"> <img src="https://listerr.in/wp-content/uploads/2021/03/pizza_hut.5a98457c37496.png" alt="" class="img2"> <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F9%2F2021%2F06%2F15%2Fmozzarella-pizza-margherita-FT-RECIPE0621.jpg&q=85" alt="" class="img3"> <img src="https://media.istockphoto.com/photos/picking-slice-of-pepperoni-pizza-picture-id1133727757?k=20&m=1133727757&s=612x612&w=0&h=WAx4F4efU3Yx3Qu15iUgTMtB7G_kbmh-DqAvL4aNfeE=" alt="" class="img4"> </div> </div>