질문

3 열 Grid가 있고 모든 크기를 조정할 때 왼쪽 이미지 (파란색 광선)가 항상 텍스트 옆에 머물기를 원합니다. 그러나 크기를 조정할 때 Grid가 늘어나지 만 (다른 열에서는 괜찮음) 이미지가 항상 텍스트 옆에 머물러 있고 표류하지 않기를 원합니다. 조언하십시오.

내 디자인이 어떻게 보이기를 원합니까?

왼쪽 상단에서 광선이 나오는 텍스트 이것은 내 코드입니다

 #index-about-top {
            @include md {
                display: grid;
                grid-template-columns: 10% 340px auto;
                padding-left: 15px;
            }

            article {
                @include md {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    z-index: 1;
                    padding-bottom: 40px;
                }
            }

            #blue-mug {
                @include md {
                    margin-left: -150px;
                }
            }

            #ray-scribble {
                @include md {
                    top: 60px;
                }
            }
        }

<div id="index-about-top">
            <img src="img/Index/about-ray-scribble.svg" id="ray-scribble">
            
            <article>
                <h2>About Us</h2>
                <p>Glaze Studio inspires curiosity and discovery around the art and craft of clay, drawing together
                students, artists, and an engaged public into a welcoming community. </p>
            </article>
            
            <img src="img/Index/bluemug.png" id="blue-mug" class="show-for-md">
        </div>

Expand snippet

답변1

대체 옵션은 :: before를 사용하는 것입니다. 의사 요소 와 배경 이미지.

참고 : 작동하도록 Sass 믹스 인을 제거해야했습니다.

#index-about-top {
  display: grid;
  grid-template-columns: 50px 340px auto;
  padding-left: 15px;
}

article {
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
  padding-bottom: 40px;
}

#blue-mug {
  margin-left: -150px;
}

#ray-scribble {
  top: 60px;
}

<div id="index-about-top">
            <img src="img/Index/about-ray-scribble.svg" id="ray-scribble">
            
            <article>
                <h2>About Us</h2>
                <p>Glaze Studio inspires curiosity and discovery around the art and craft of clay, drawing together
                students, artists, and an engaged public into a welcoming community. </p>
            </article>
            
            <img src="img/Index/bluemug.png" id="blue-mug" class="show-for-md">
        </div>