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 列布局中，您可以将每个 container/column 的宽度设置为 33.33%。您还可以使用 grid-auto-rows: 1fr 让每个容器共享相同的高度：

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

我还建议将所有文本包装到一个新容器中，以便更好地控制布局。通过这样做，您可以使用 display: flex，然后将 figure 容器内的每个元素设置为 max-width: 50%，这样它们的宽度就相等了。根据图像大小，这可能会导致图像拉伸。您可以使用 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大专栏。要反转图像 > 文本和文本 > 图像之间的布局，只需使用 (even) 或 (odd) 选择器通过 flex-direction: row-reverse.

进行控制

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

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

Flexbox changing text and image position when on a certain width

html

css

media-queries

flexbox

编辑：

完整片段（确保检查整页）：