> 웹 프론트엔드 > CSS 튜토리얼 > 줄 바꿈 없이 텍스트 왼쪽에 이미지를 띄우는 방법은 무엇입니까?

줄 바꿈 없이 텍스트 왼쪽에 이미지를 띄우는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-19 13:18:02
원래의
272명이 탐색했습니다.

How to Float an Image to the Left of Text Without Wrapping?

CSS Float: 이미지를 텍스트 왼쪽으로 플로팅

이 시나리오에서는 썸네일 이미지가 있는 레이아웃을 구현하는 것을 목표로 합니다. 이미지를 텍스트로 감싸지 않고 텍스트 내용의 왼쪽에 떠 있습니다. 다음은 HTML과 CSS를 사용하여 이를 달성하는 방법에 대한 자세한 설명입니다.

HTML 구조:

<div class="post-container">
    <div class="post-thumb">
        <img src="thumb.jpg">
    </div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>Post description description description etc etc etc</p>
    </div>
</div>
로그인 후 복사

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}
로그인 후 복사

설명:

  • .post-container에는 썸네일과 텍스트 콘텐츠가 모두 포함되어 있습니다.
  • .post-thumb은 이미지를
  • 디스플레이 설정: 이미지의 블록이 .post-thumb 컨테이너의 전체 너비를 차지하도록 보장합니다.
  • .post-content는 210px의 왼쪽 여백을 적용합니다. 이미지와 텍스트 사이에 충분한 공간이 있는지 확인하세요.
  • .post-title은 게시물 제목을 굵게 표시하고 더 큰 글꼴 크기로 지정합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿