CSS 플로트를 사용하여 줄 바꿈 없이 텍스트 왼쪽에 이미지를 배치하는 방법은 무엇입니까?

CSS 플로트를 사용하여 텍스트 왼쪽에 이미지 배치

웹 페이지를 디자인할 때 이미지가 텍스트 왼쪽에 표시되기를 원하는 상황이 발생할 수 있습니다. 텍스트를 감싸지 않고 텍스트로 만듭니다. CSS 부동 소수점을 사용하면 이에 대한 솔루션이 제공됩니다.

HTML

제공된 HTML에는 세 가지 필수 요소가 있습니다.

• .post-container: 전체 내용을 포함합니다. 우체통.
• .post-thumb: 뜨고 싶은 이미지가 포함되어 있습니다. left.
• .post-content: 게시물 제목과 설명을 담습니다.

<div class="post-container">
    <div class="post-thumb"><img  src="/static/imghwm/default1.png" data-src="thumb.jpg" class="lazy" alt="CSS 플로트를 사용하여 줄 바꿈 없이 텍스트 왼쪽에 이미지를 배치하는 방법은 무엇입니까?" ></div>
    <div class="post-title">Post title</div>
    <div class="post-content"><p>post description...</p></div>
</div>

CSS

원하는 레이아웃을 얻으려면 다음 CSS 속성을 적용하세요. :

• .post-container: 오버플로 설정: 자동 내부 콘텐츠가 컨테이너 경계를 넘어 확장되도록 합니다.
• .post-thumb: 이미지를 왼쪽으로 띄우려면 float: left를 설정합니다.
• .post-thumb img: 이미지가 자체적으로 표시되도록 display: block을 설정합니다. space.
• .post-content: 텍스트를 이미지 오른쪽에 배치하려면 왼쪽 여백 값을 이미지 너비(예: 210px)보다 크게 설정하세요.

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

.post-content {
    margin-left: 210px;
}

중요사항

• 이미지가 포장되지 않도록 텍스트 주위에서 .post-content의 왼쪽 여백 값이 이미지 너비보다 넓은지 확인하세요.
• 게시물 상자 상단에 헤더를 원하는 경우

  .post-content 내에 태그를 지정하세요.

위 내용은 CSS 플로트를 사용하여 줄 바꿈 없이 텍스트 왼쪽에 이미지를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!