为什么浮动能实现文字环绕图片而不会重叠
今天看图解CSS的章节，虽然主要讲的是nth-of-type选择器的使用，但是本人却关注到了页面的排版方式，如下：
HTML
<body>
<p class="article">
<img src="http://img.ujian.cc/nice/35.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/36.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/38.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</p>
</body>CSS
<style type="text/css">.article {width: 500px;margin: 20px auto;}.article img:nth-of-type(odd){float: left;margin-right: 10px;}.article img:nth-of-type(even){float: right;margin-left: 10px;}</style>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7333
9
1627
14
1351
46
1262
25
1209
29
HTML, CSS 및 jQuery: 플로팅 효과가 있는 버튼 만들기
Oct 24, 2023 pm 12:09 PM
HTML, CSS 및 jQuery: 플로팅 효과가 있는 버튼을 만들려면 특정 코드 예제가 필요합니다. 소개: 요즘 웹 디자인은 HTML, CSS 및 JavaScript와 같은 기술을 사용하여 다양한 측면을 추가할 수 있습니다. 페이지에 이러한 특수 효과 및 대화형 효과가 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 플로팅 효과가 있는 버튼을 만드는 방법을 간략하게 소개하고 구체적인 코드 예제를 제공합니다. 1. HTML 구조 먼저, 우리는
수레를 지울 수 있는 방법이 있나요?
Feb 22, 2024 pm 04:00 PM
부동 소수점을 지우는 방법이 있습니까? 웹 페이지 레이아웃에서 부동 소수점은 요소가 문서 흐름에서 벗어나 다른 요소에 상대적으로 배치되도록 하는 일반적인 레이아웃 방법입니다. 그러나 플로팅 레이아웃을 사용할 때 자주 발생하는 문제는 상위 요소가 플로팅 요소를 올바르게 래핑할 수 없어 페이지의 레이아웃이 무질서해지는 것입니다. 따라서 상위 요소가 플로팅된 요소를 올바르게 래핑할 수 있도록 플로트를 지우는 조치를 취해야 합니다. 부동 소수점을 지우는 방법에는 여러 가지가 있습니다. 다음에서는 일반적으로 사용되는 몇 가지 방법을 소개하고 구체적인 코드 예제를 제공합니다.
HTML 레이아웃 팁: 부동 요소 제어에 위치 속성을 사용하는 방법
Oct 21, 2023 am 09:22 AM
HTML 레이아웃 기술: 위치 속성을 사용하여 부동 요소를 제어하는 방법 웹 디자인에서 레이아웃은 매우 중요한 부분입니다. 합리적인 레이아웃을 통해 웹 페이지를 더욱 아름답고 읽기 쉽게 만들 수 있으며 사용자 경험을 향상시킬 수 있습니다. 레이아웃을 구현하는 과정에서 플로팅 요소의 제어는 핵심 포인트 중 하나입니다. HTML은 부동 요소를 제어할 수 있는 위치 속성을 제공합니다. 이 기사에서는 위치 속성을 사용하여 부동 요소를 레이아웃하고 특정 코드를 제공하는 방법을 소개합니다.
CSS 이미지 속성 안내: 개요 및 표시
Oct 25, 2023 am 08:57 AM
CSS 이미지 속성 안내: 개요 및 디스플레이CSS는 프런트 엔드 개발의 필수 부분이며 이미지 속성도 필수적입니다. 이 문서에서는 이미지 속성에 대한 두 가지 중요한 개념인 개요와 표시에 중점을 둘 것입니다. 이 문서에서는 해당 정의, 사용법 및 특정 코드 예제를 자세히 설명합니다. 개요 속성 개요: 개요 속성은 레이아웃 공간을 차지하지 않고 요소 주위에 개요를 만드는 데 사용됩니다. 그것은
CSS 플로트 및 클리어 플로트: 플로트 및 클리어 플로트 마스터하기
Nov 18, 2023 am 10:56 AM
CSS 플로팅 및 플로트 지우기: 플로트 플로트 및 지우기 기술을 익히려면 웹 디자인 및 개발에서 CSS 플로트(float)가 일반적인 레이아웃 기술 중 하나입니다. float를 사용하여 요소를 왼쪽이나 오른쪽으로 이동하여 페이지의 요소를 조정하고 정렬할 수 있습니다. 그러나 부동 요소는 부모 요소의 높이가 접히는 등 페이지에 몇 가지 문제를 일으킬 수도 있습니다. 그러므로 수레를 사용하고 제거하는 기술을 익히는 것이 매우 중요합니다. 이 기사에서는 CSS 부동 및 클리어 부동 기술에 중점을 두고 구체적인 내용을 제공합니다.
CSS 레이아웃 속성의 포괄적인 목록: 표시, 위치 및 부동
Oct 20, 2023 pm 05:36 PM
CSS 레이아웃 속성의 전체 목록: 표시, 위치 및 floatCSS는 웹 페이지의 스타일을 제어하는 데 사용되는 마크업 언어입니다. 웹 페이지 레이아웃을 디자인할 때 레이아웃 속성은 매우 중요합니다. CSS는 다양한 레이아웃 속성을 제공하며 가장 일반적으로 사용되는 속성은 표시, 위치 및 부동입니다. 이 기사에서는 이러한 세 가지 레이아웃 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다. 표시 속성 표시 속성은 요소를 지정하는 데 사용됩니다.
HTML에서 고정 위치 지정을 사용할 수 없는 이유를 토론하세요.
Jan 20, 2024 am 10:15 AM
HTML에서 고정 위치 지정을 사용할 수 없는 문제에 대한 논의 인터넷의 급속한 발전으로 인해 웹 디자인은 점점 더 복잡해지고 다양해졌습니다. 웹 디자인에서는 페이지가 특별한 효과를 얻을 수 있도록 요소의 위치를 제어하기 위해 고정 위치 지정(위치:고정)을 사용해야 하는 경우가 많습니다. 그러나 어떤 경우에는 HTML에서 고정 위치 지정을 사용할 수 없어 디자이너에게 많은 골칫거리를 안겨줍니다. 이 기사에서는 HTML에서 고정 위치 지정을 사용할 수 없는 점을 살펴보고 구체적인 코드 예제를 제공합니다. 1. 플로팅 요소
CSS 드롭다운 메뉴 속성 최적화 팁: 위치 및 Z-색인
Oct 20, 2023 pm 12:02 PM
CSS 드롭다운 메뉴 속성 최적화 팁: 위치 및 Z-인덱스 웹 디자인에서 드롭다운 메뉴는 일반적인 대화형 요소 중 하나입니다. 드롭다운 메뉴를 통해 사용자는 필요한 옵션을 쉽게 선택할 수 있어 사용자 경험이 향상됩니다. 그러나 페이지에 여러 개의 드롭다운 메뉴가 있는 경우 위치 지정 및 계단식 관계로 인해 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 CSS의 position 속성과 z-index 속성을 사용하여 드롭다운 메뉴의 표시 효과를 최적화할 수 있습니다.
