특정 디자인을 구축하려고 합니다. 데스크톱과 모바일의 디자인은 다음과 같습니다.
으아아아 으아아아
지금까지 개발한 코드펜입니다. 이러한 요소를 배치하는 방법과 취해야 할 접근 방식을 이해하지 못합니다.
P粉3229187292024-03-23 00:20:24
먼저, 컨테이너 요소의 올바른 최대 너비와 너비를 설정하고 데스크탑 디자인에 따라 화면 중앙에 위치할 수 있도록 해야 합니다.
둘째, .text-container div를 이미지 위에 오도록 왼쪽에 배치합니다. 이미 올바른 계층 구조에 있으므로 z-index를 설정할 필요가 없으며 이미지 위에 쌓입니다
마지막으로 버튼을 .text-container로 이동하여 텍스트와 함께 배치할 수 있도록
CSS의 업데이트된 섹션은 다음과 같습니다.
으아악 으아악이미지 크기 조정 시 참조 디자인과 동일한 가로 세로 비율을 유지해야 한다는 점에 유의하세요.