html - Flexbox 在一定宽度上更改文本和图像位置

Question

好的，伙计们，我有一个挑战，似乎无法解决。我有 3 张图片，其中的文字必须彼此相邻显示，但在屏幕上(最大宽度:768 像素)时，图片必须与第一张和第三张图片一起显示在彼此下方，文字必须位于右侧，图像位于接下来，对于第二张图片，左边是文字，右边是图片。所以像这样:

另外:图片和文字必须有背景色，所以我不能把它们放在一个段落中，它们都必须是单独的框!!

我认为 flexbox 是最好的解决方案，但我就是不想进去。有人可以帮忙吗？

.fish{
  grid-column: span 13;
  display: flex;
}

.fishpics{
  max-width: 100%;
  height: 200px;
}

figure{
  background-color: darkred;
  margin: 5px;
  flex-wrap: 1;
}

            <div class="fish">
                <figure>
                <img class="fishpics" src="img/fish1.jpg">
                <h3>tekst</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
                </figure>
                <figure>
                <img class="fishpics" src="img/fish2.jpg">
                <h3>tekst</h3>
                <p class="pright">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
            </figure>
            <figure>
                <img class="fishpics" src="img/fish3.jpg">
                <h3>tekst</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
            </figure>
            </div>

如您所见，我似乎还没有尝试过，但我刚刚删除了无助的尝试。我认为将它们放在一个数字中是最好的，但似乎无法实现。

Answer 1

有了网格，这很容易做到。在 3 列布局中，您可以将每个容器/列的宽度设置为 33.33%。您还可以使用 grid-auto-rows: 1fr 让每个容器共享相同的高度:

.fish {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-auto-rows: 1fr;
}

我还建议将所有文本包装到一个新容器中，以便更好地控制布局。通过这样做，您可以使用 display: flex 然后将 figure-container 中的每个元素设置为 max-width: 50% 所以它们的宽度相等。根据图像大小，这可能会导致图像拉伸(stretch)。您可以使用 object-fit: cover 来解决这个问题，但是这会导致裁剪一些图像。

.fishpics {
  max-width: 50%;
  height: auto;
  object-fit: cover;
}

.text-container {
  max-width: 50%;
}

对于您的 media-query，只需将 grid-template-columns 更改为 1fr，因此 figure - 容器堆叠在一起，就像它们现在在 1 个大列中一样。要反转 image > text 和 text > image 之间的布局，只需使用 (even) 或 (odd) -选择器通过 flex-direction 来控制它:行反转。

@media only screen and (max-width: 768px) {
  .fish {
    grid-template-columns: 1fr;
  }
  /* Makes every even number figure container reversed */
  figure:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

编辑:

要使文本位于图像下方，只需在 figure 元素上使用 flex-direction: column。

完整片段(确保检查整页):

.fish {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-auto-rows: 1fr;
}

figure {
  background-color: darkred;
  margin: 5px;
  display: flex;
  flex-direction: column;
}


@media only screen and (max-width: 768px) {
  .fish {
    grid-template-columns: 1fr;
  }
  figure {
    flex-direction: row;
  }
  /* Makes every even number figure container reversed */
  figure:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  /* Max width 50% and height: auto for responsive image that takes up 50% of width */
  .fishpics {
    max-width: 50%;
    height: auto;
    object-fit: cover;
  }
  .text-container {
    max-width: 50%;
  }
}

<div class="fish">
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p class="pright">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
</div>