Web Front-end
HTML Tutorial
Why float can realize text wrapping around pictures without overlapping
Why float can realize text wrapping around pictures without overlapping
Today 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 AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
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
1384
52
HTML, CSS and jQuery: Make a button with a floating effect
Oct 24, 2023 pm 12:09 PM
HTML, CSS and jQuery: Making a button with a floating effect requires specific code examples. Introduction: Nowadays, web design has become an art form. By using technologies such as HTML, CSS and JavaScript, we are able to add various aspects to the page. Such special effects and interactive effects. This article will briefly introduce how to use HTML, CSS and jQuery to create a button with a floating effect, and provide specific code examples. 1. HTML structure First, we need to
Is there any way to clear floats?
Feb 22, 2024 pm 04:00 PM
Is there any method to clear floats? Specific code examples are required. In web page layout, floats are a common layout method that allows elements to break away from the document flow and be positioned relative to other elements. However, a problem often encountered when using floating layout is that the parent element cannot wrap the floating element correctly, causing the page to have a disordered layout. Therefore, we need to take measures to clear the float so that the parent element can wrap the floated element correctly. There are many ways to clear floats. The following will introduce several commonly used methods and give specific code examples.
HTML layout tips: How to use the position attribute for floating element control
Oct 21, 2023 am 09:22 AM
HTML layout skills: How to use the position attribute to control floating elements In web design, layout is a very important part. Through reasonable layout, web pages can be made more beautiful and easy to read, and user experience can be improved. In the process of implementing layout, the control of floating elements is one of the key points. HTML provides the position attribute, through which we can control floating elements. This article will introduce how to use the position attribute to layout floating elements and provide some specific code
CSS Floats and Clear Floats: Mastering Floats and Clear Floats
Nov 18, 2023 am 10:56 AM
CSS floating and clearing floats: Mastering the skills of floating and clearing floats requires specific code examples. In web design and development, CSS floats (float) are one of the common layout techniques. You can use float to move elements to the left or right to adjust and arrange the elements on the page. However, floating elements can also cause some problems on the page, such as the height of the parent element collapsing, etc. Therefore, it is very important to master the skills of using floats and clearing them. This article will focus on CSS floats and clear float techniques, and provide specific
Guide to CSS image properties: outline and display
Oct 25, 2023 am 08:57 AM
Guide to CSS image properties: outline and displayCSS are an integral part of front-end development, and image properties are also essential. In this article, we will focus on two important concepts about image properties: outline and display. This article will detail their definition, usage, and specific code examples. Overview of outline attribute: The outline attribute is used to create an outline around an element without occupying layout space. it is
Comprehensive list of CSS layout properties: display, position and float
Oct 20, 2023 pm 05:36 PM
Complete list of CSS layout properties: display, position and float CSS is a markup language used to control the style of web pages. Layout properties are very important when designing web page layout. CSS provides a variety of layout properties, the most commonly used of which are display, position and float. In this article, we will introduce these three layout properties in detail and provide specific code examples. display attribute The display attribute is used to specify the element
Discuss the reasons why fixed positioning cannot be used in HTML
Jan 20, 2024 am 10:15 AM
Discussion on the Problem of Unable to Use Fixed Positioning in HTML With the rapid development of the Internet, web design has become more and more complex and diverse. In web design, it is often necessary to use fixed positioning (position:fixed) to control the position of elements so that the page can achieve some special effects. However, in some cases, fixed positioning cannot be used in HTML, causing designers a lot of headaches. This article will explore the inability to use fixed positioning in HTML and provide specific code examples. 1. Floating elements
CSS drop-down menu property optimization tips: position and z-index
Oct 20, 2023 pm 12:02 PM
CSS drop-down menu attribute optimization tips: position and z-index In web design, drop-down menu is one of the common interactive elements. Through the drop-down menu, users can easily select the required options, improving user experience. However, when there are multiple drop-down menus on the page, their positioning and cascading relationship may cause problems. In order to solve these problems, we can optimize the display effect of the drop-down menu by using the position attribute and z-index attribute in CSS.
