다른 화면 크기로 DOM 요소 정렬

다른 화면 크기로 DOM 요소 정렬

왼쪽이나 오른쪽에 텍스트가 있고 그 옆에 이미지가 있는 컴포넌트를 만들고 싶습니다.

현재는 어떤 요소가 먼저인지 확인하기 위해 bool 파라미터만 사용합니다.큰 화면 크기에서는 모든 것이 정상이지만 작은 화면에서는 모든 이미지가 텍스트 위에 있어야 합니다.

텍스트가 왼쪽에 있는 경우 이미지 위에 배치되기 때문에 작동하지 않습니다.

문제를 나타내는 작업 예를 작성했습니다.

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

이 동작을 수정하려면 어떻게 해야 합니까?혹시 이 if 스테이트먼트도 없앨 수 있을까요?이미지와 텍스트 컨테이너의 순서만 다를 뿐이기 때문입니다.

CSS 그리드를 사용하고 있기 때문에, 다음의 방법으로 간단하게 실시할 수 있습니다.grid-template-areas영역을 만듭니다.img그리고.txt:

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

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

위의 규칙은 작은 사이즈에만 적용할 수 있습니다.이 코드와 상자의 예에서는 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;
}

언급URL : https://stackoverflow.com/questions/53791139/reorder-dom-elements-on-different-screen-sizes