모바일 및 데스크톱 버전에서 다른 순서로 요소를 배치하는 방법을 잘 모르겠습니다.

Question

특정 디자인을 구축하려고 합니다. 데스크톱과 모바일의 디자인은 다음과 같습니다.

으아아아 으아아아

지금까지 개발한 코드펜입니다. 이러한 요소를 배치하는 방법과 취해야 할 접근 방식을 이해하지 못합니다.

Answer 1

먼저, 컨테이너 요소의 올바른 최대 너비와 너비를 설정하고 데스크탑 디자인에 따라 화면 중앙에 위치할 수 있도록 해야 합니다.

둘째, .text-container div를 이미지 위에 오도록 왼쪽에 배치합니다. 이미 올바른 계층 구조에 있으므로 z-index code>를 설정할 필요가 없으며 이미지 위에 쌓입니다

마지막으로 버튼을 .text-container로 이동하여 텍스트와 함께 배치할 수 있도록

CSS의 업데이트된 섹션은 다음과 같습니다.

으아악 으아악

이미지 크기 조정 시 참조 디자인과 동일한 가로 세로 비율을 유지해야 한다는 점에 유의하세요.