HTML/CSS에서 이미지 주위에 텍스트를 배치하려면 어떻게 해야 합니까?

HTML/CSS에서 이미지 주위에 텍스트 배치

질문:

이미지 주위를 감싸는 텍스트 블록을 만들 수 있습니까? 이미지와 같은 이미지 제공되나요?

답변:

물론이죠! 이 효과를 얻으려면 이미지 컨테이너를 플로팅해야 합니다. 방법은 다음과 같습니다.

HTML 코드:

<div>

CSS 코드:

#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

결과:

컨테이너의 고정 너비(400px) ) 및 노란색 배경이 텍스트 블록을 만듭니다. 너비가 150px이고 빨간색 배경이 있는 플로팅 이미지(#floated)가 왼쪽에 위치하여 텍스트가 그 주위로 흐를 수 있습니다.

대화형 예:

이 기술의 라이브 시연 JSFiddle에서 찾을 수 있습니다: http://jsfiddle.net/kYDgL/

위 내용은 HTML/CSS에서 이미지 주위에 텍스트를 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!