Examples of CSS text surround images

Text wrapping is a typographical method of Microsoft Office Wordworks. It is mainly used to set the positional relationship between objects and texts in Word documents, such as images, text boxes, custom images, clip art, and artistic words. It generally includes a variety of text wrapping methods, including the four-around, dense, lined below the text, floating above the text, up and down, and traversing.

However, we sometimes need this style for webpage layout. What should we do? It is actually very simple, mainly the use of float. For details, see the following example:

HTML section:
 

The code is as follows:

Copy code

<Div class = "txt"> <P> Front-end development engineers are a very new profession, and the time they really start to pay attention to is no more than 5 Years, short for Web front-end development engineers. Web front-end development evolved from the art, and the name has obvious characteristics of the times. In the evolution of the Internet, in the Web 1.0 era, The main content of the website is static, and users' website use behavior is dominated by browsing. After 2005, the Internet entered the Web 2.0 era, Various Web applications similar to desktop software have emerged, and the front-end of the website has undergone earth-shaking changes. Web pages no longer only carry a single Rich media makes the webpage content more vivid. The software-based interactive form on the webpage provides users with a better user experience, These are implemented based on the frontend technology. </P> <P> With the popularization of Web 2.0 and the popularization of W3C organizations, the influence of website reconstruction is growing at an astonishing rate. XHTML + CSS layout, DHTML IT is like a tornado with Ajax. IT enterprises of all sizes, including Sina, Sohu, Netease, Tencent, and Taobao, are interested in their own The website is restructured. </P> </Div> CSS section:   *{ Margin: 0; Padding: 0; }       . Txt { Margin: 50px auto; Width: 500px; Padding: 10px; Border: 1px solid # ccc; Font: 14px/20px "Microsoft YaHei "; Color: #666; }       . Txt p { Text-indent: 20px; }       . Txt img { Float: left; Width: 180px; Height: 110px; Margin: 5px 10px 0 0; }

OK. The effect after running is as follows:

Example

The code is as follows:

Copy code

The HTML code is as follows: <Div class = "wrap_area"> <Div class = "shape_wrap"> <Div style = "width: 250px;"> </div> <Div style = "width: 280px;"> </div> <Div style = "width: 305px;"> </div> . . . </Div> <P> Numerous blocks of text </p> . . . </Div> The CSS code is roughly as follows: Div. wrap_area {position: relative ;} Div. wrap_area img {position: absolute; left: 0px; top: 0px ;} Div. wrap_area p {position: relative ;} Div. shape_wrap div {float: left; clear: left; height: 20px ;}

Students who have good CSS skills should have already known the mysteries of this process. They also use float to present some of the div content to the document stream, and then use div to create a path for passing the text.