플로팅을 사용하여 그림 주위에 텍스트 둘러싸기

그림을 왼쪽으로 부동 구현하고 아래 텍스트를 그 주위로 둘러싸도록 하려면 다음을 수행하십시오.

1. 텍스트 요소를 오버레이하는 이미지를 선택하세요
2. 스타일 패널 내에서 레이아웃 구성에 액세스
3. 왼쪽 플로트 옵션을 선택하세요
4. 포함하다 심 이미지 테두리와 주변 콘텐츠 사이의 간격을 오른쪽과 아래쪽으로

이미지를 오른쪽으로 정렬할 때 간격을 위해 왼쪽과 아래쪽 패딩을 통합하는 것을 잊지 마세요.

둘러싸는 요소 지우기

래핑된 구성 요소에 대한 명확한 가시성을 설정하려면 다음을 수행하십시오.

1. 플로팅된 구성요소 아래의 요소를 선택하세요.
2. 스타일 패널 내의 레이아웃 설정에 액세스
3. 원하는 지우기 설정을 선택하세요.

플로팅을 통한 맞춤형 기둥 구축

부동 소수점을 활용하여 요소를 나란히 정렬하고 열 섹션과 같은 상위 컨테이너의 전체 너비를 차지할 수 있습니다. 부동 소수점을 사용하여 개인화된 열을 만들려면 다음을 수행하세요. 

1. 캔버스에 div 블록을 통합하세요. 이것이 여러분의 봉투가 됩니다.
2. 엔벨로버 내에 3개의 div 블록을 추가하세요.
3. 최근 추가된 3개의 div 블록 중 하나에 클래스를 소개합니다.
4. 너비를 33.33%로 고정하고 플로트를 왼쪽으로 설정합니다.
5. 나머지 두 div 블록에 동일한 클래스를 적용합니다.

마찬가지로 부동 소수점을 활용하여 상위 컨테이너 내에서 요소를 왼쪽이나 오른쪽으로 이동할 수 있습니다. 이 방법은 위의 이미지 부동에 대해 설명한 것과 일관성을 유지합니다.

Flexbox는 앞서 언급한 모든 레이아웃 책임을 보다 편리하고 효과적으로 처리할 수 있습니다. Flexbox 사용에 대해 자세히 알아보세요.

‍