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

HTML/CSS를 사용하여 이미지 주위에 텍스트 배치

질문:

디자인할 수 있나요? 다음과 같이 이미지를 감싸는 텍스트 블록:

[이미지 이미지를 텍스트로 감싸는 방식]

답변:

예, 이미지를 플로팅하면 가능합니다. 컨테이너.

HTML:

<div>

CSS:

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

설명:

• #컨테이너 div는 텍스트와 이미지의 경계를 정의합니다.
• #floated div에는 이미지 주위를 둘러쌀 텍스트가 포함되어 있습니다.
• #floated div의 float: left 속성은 이미지를 부동 위치로 만듭니다. 컨테이너의 왼쪽.
• #floated div의 너비 속성은 텍스트 너비를 정의합니다. be.

실제 예:

[JSFiddle](http://jsfiddle.net/kYDgL/)

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