我想在同一水平面上放置两个网格，每个网格宽度为 50%

Question

我有一个类文本 div，其中包含以 flex 作为显示的文本，还有另一个名为 images 的 div 有 4 个使用网格显示对齐的图像。我担心的是我不能让它们处于同一水平。如果我给文本容器一个边距顶部属性以使其与图像容器对齐，图像容器也会下降，让我对齐不均匀

.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: "a a a a b b b b" "c c c c d d d d";
  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>

我已经练习 Web 开发 2 个月了。任何帮助或指导将不胜感激！非常感谢！

Answer 1

所以，我不完全确定这是否是你所追求的，但我收集到的是你希望你的两个主要 div 都显示在同一层上。为此，我刚刚将这两个元素都封装在一个 flex 容器中，并删除了 grid-template-areas，如果您愿意，您仍然可以使用它。

我还删除了“浮动”属性，因为它经常会弄乱许多其他布局功能，希望对您有所帮助，如果没有，请告诉我如何改进答案

.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>