在不同的屏幕尺寸上重新排序 DOM 元素

Question

我想创建一个组件，左侧或右侧有一个文本，旁边有一个图像。

目前我只使用一个布尔参数来检查哪个元素先出现。在较大的屏幕尺寸上一切都很好，但对于较小的屏幕，每个图像都应该在文本上方。

如果文本在左侧，这不起作用，因为它将自身置于图像上方。

我创建了一个显示问题的工作示例

https://codesandbox.io/s/3qpj23y3o1

如何解决此问题？也许也有办法摆脱这个 if 语句？因为唯一不同的是图像和文本容器的顺序。

Answer 1

由于您使用的是 CSS 网格，因此您只需使用 grid-template-areas 并创建您的区域 img 和 txt 即可：

   .textImageSectionContainer {
      ...
      grid-template-areas:'img' 'txt';

    }
    .imgContainer {
       ....
       grid-area:img;
      }
     .txtContainer {
       padding: 50px;
       grid-area:txt;
      }

您只能将上述规则应用于小尺寸，在这个 codesandbox 示例中，我将上述规则设置为 700 像素以下的屏幕尺寸

更新：

您可以使用类绑定来避免if 语句和冗余代码：

<template>
  <div
    :class="{ imgleft: imageLeft, imgright: !imageLeft }"
    class="textImageSectionContainer"
  >
    <div class="imgContainer"><img :src="imgUrl" class="img" /></div>
    <div class="txtContainer">
      <div class="headerText">{{ headerText }}</div>
      <div class="mainText">{{ mainText }}</div>
    </div>
  </div>
</template>

CSS 规则应该是这样的：

.imgleft {
  display: flex;
}

.imgright {
  display: flex;
  flex-direction: row-reverse;
}