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

Question

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

当前，我仅使用bool参数检查哪个元素排在最前面。在较大的屏幕上，一切都很好，但是在较小的屏幕上，每个图像都应在文本上方。

如果文本在左侧，则此操作无效，因为它会将其自身放置在图像上方。

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

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示例中，我将上述规则设置为700px以下的屏幕尺寸

更新：

您可以使用类绑定来避免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;
}