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

Posted 2023-02-22

【中文标题】在不同的屏幕尺寸上重新排序 DOM 元素

【英文标题】：Reorder DOM elements on different screen sizes

【发布时间】：2019-05-16 09:33:37

【问题描述】：

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

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

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

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

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

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

【参考方案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;

【讨论】：

正是我要找的东西 :) 你知道我是否可以摆脱该模板中的大 if 语句吗？

@Question3r 哪个语句？

我的模板组件顶部的 if 语句

@Question3r 我更新了我的答案和codesandox代码

我一直在向 Boussadjra 学习有关 CSS 的知识。继续加油兄弟:)