


Why float can realize text wrapping around pictures without overlapping
Jun 07, 2017 am 09:54 AMToday I read the chapter on graphic CSS. Although it mainly talks about the use of the nth-of-type selector, I paid attention to the layout of the page, as follows:
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>

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML, CSS and jQuery: Make a button with a floating effect

HTML layout tips: How to use the position attribute for floating element control

Guide to CSS image properties: outline and display

CSS Floats and Clear Floats: Mastering Floats and Clear Floats

Discuss the reasons why fixed positioning cannot be used in HTML

CSS drop-down menu property optimization tips: position and z-index

Comprehensive list of CSS layout properties: display, position and float
