플로팅 Div를 사용하여 불규칙한 모양의 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?

불규칙한 모양의 이미지 주위에 텍스트를 배치하는 방법

이미지 주위에 텍스트를 배치하는 것은 일반적인 레이아웃 기술이지만, 이미지가 그렇지 않은 경우에는 어떻게 해야 합니까? 단순한 직사각형? 여전히 우아한 감싸기 효과를 만들 수 있나요?

이 기사에서는 플로팅 div로 모양의 영역을 차단하여 불규칙한 모양의 이미지 주위에 텍스트를 감싸는 Tory Lawson이 제안한 방법을 살펴보겠습니다.

1단계: 랩 영역 정의

이미지를 거꾸로 뒤집어 그림을 그립니다. 정리를 위한 작은 패딩을 고려하여 텍스트를 끝내려는 경계선입니다. 그리드 시스템을 사용하여 이미지 테두리로부터 일정한 거리를 유지합니다.

2단계: 측정 목록 생성

10픽셀마다 윤곽선의 너비를 측정하고 씁니다. 종이의 x 좌표를 아래로 내리세요. 이렇게 하면 차단 div의 간격이 결정됩니다.

3단계: 마크업 및 CSS 생성

이미지와 차단 div를 포함할 래퍼 div를 정의합니다. 래퍼 내부에서 스페이서 div를 만들고 2단계에서 수집한 측정값에 따라 너비를 설정합니다.

<div>

#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}

.spacer {
  display: block;
  float: right;
  clear: right;
}

p {
  display: inline;
  color: #FFF;
}

이 단계를 따르면 불규칙한 div 주위에 텍스트를 효과적으로 감쌀 수 있습니다. 모양의 이미지를 통해 디자인에 독특하고 세련된 느낌을 더할 수 있습니다. CSS에는 간단한 "텍스트 줄 바꿈" 옵션이 없을 수 있지만 이 해결 방법은 안정적이고 미학적으로 만족스러운 솔루션을 제공합니다.

위 내용은 플로팅 Div를 사용하여 불규칙한 모양의 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!