为什么浮动能实现文字环绕图片而不会重叠-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

为什么浮动能实现文字环绕图片而不会重叠

PHP中文网

Jun 07, 2017 am 09:54 AM

今天看图解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>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML、CSS和jQuery：制作一个带有浮动效果的按钮Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中

清除浮动有什么方法Feb 22, 2024 pm 04:00 PM

清除浮动有什么方法，需要具体代码示例在网页布局中，浮动是一种常用的布局方法，可以让元素脱离文档流，并相对其他元素进行定位。然而，使用浮动布局时常常会遇到一个问题，就是父元素无法正确地包裹浮动元素，导致页面产生布局错乱的情况。所以，我们需要采取措施来清除浮动，使得父元素能够正确地包裹浮动元素。清除浮动的方法有多种，下面将介绍常用的几种方法，并给出具体的代码示例

HTML布局技巧：如何使用position属性进行浮动元素控制Oct 21, 2023 am 09:22 AM

HTML布局技巧：如何使用position属性进行浮动元素控制在网页设计中，布局是非常重要的一环。通过合理的布局可以使网页更加美观、易读，提升用户体验。而在实现布局过程中，浮动元素的控制是其中一个关键点。HTML提供了position属性，通过这个属性我们可以实现对浮动元素的控制。本文将介绍如何使用position属性进行浮动元素的布局，并提供一些具体的代码

CSS 图像属性指南：outline 和 displayOct 25, 2023 am 08:57 AM

CSS图像属性指南：outline和displayCSS是前端开发中不可或缺的一部分，其中图像属性也是必不可少的。在这篇文章中，我们将重点介绍两个关于图像属性的重要概念：outline和display。本文将详细说明它们的定义、用法以及具体的代码示例。outline属性概述：outline属性用于在元素周围创建一个轮廓线，不占据布局空间。它是

CSS浮动和清除浮动：掌握浮动和清除浮动的技巧Nov 18, 2023 am 10:56 AM

CSS浮动和清除浮动：掌握浮动和清除浮动的技巧，需要具体代码示例在网页设计和开发中，CSS浮动（float）是常见的布局技术之一。使用浮动可以将元素向左或者向右移动，从而实现元素在页面中的位置调整和排列。然而，浮动元素也会给页面造成一些问题，比如父元素高度塌陷等。因此，掌握浮动的使用和清除浮动的技巧非常重要。本文将重点介绍CSS浮动和清除浮动的技巧，并提供具

CSS 布局属性大全：display，position 和 floatOct 20, 2023 pm 05:36 PM

CSS布局属性大全：display，position和floatCSS是用于控制网页样式的一种标记语言。在设计网页布局时，布局属性是非常重要的。CSS提供了多种布局属性，其中最常用的是display，position和float。在本篇文章中，我们将详细介绍这三种布局属性，并提供具体代码示例。display属性display属性用于指定元

探讨HTML中固定定位无法使用的原因Jan 20, 2024 am 10:15 AM

HTML中无法使用固定定位的问题探讨随着互联网的快速发展，网页设计也变得越来越复杂多样化。在网页设计中，经常需要使用固定定位（position:fixed）来控制元素的位置，使得页面可以实现一些特殊的效果。然而，在一些情况下，HTML中却无法使用固定定位，导致设计师们头疼不已。本文将探讨在HTML中无法使用固定定位的问题，并提供具体的代码示例。一、浮动元素

CSS 下拉菜单属性优化技巧：position 和 z-indexOct 20, 2023 pm 12:02 PM

CSS下拉菜单属性优化技巧：position和z-index在网页设计中，下拉菜单是常见的交互元素之一。通过下拉菜单，用户可以方便地选择所需的选项，提升用户体验。然而，当页面中存在多个下拉菜单时，它们的位置和层叠关系可能会产生问题。为了解决这些问题，我们可以通过使用CSS中的position属性和z-index属性来优化下拉菜单的展示效果。

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는