Css text surround image implementation method

 

The code is as follows:

Copy code

<Style type = "text/css"> . Callout { Border: 1px solid #000; Float: left; Width: 275px; }   . Callout h3 { Width: 115px; Height: 65px; Float: left; Text-indent:-8008px; Background: transparent url(team-report.gif) no-repeat 0 0; }   . Callout *{ Width: 160px; Float: right; }   . Callout **{ Width: auto; Float: none; }   </Style> <Div class = "callout"> <H3> team report graphic, replaced image <H2> Team Report 10-06-05 <Ul> <li> An <a href = "#"> anchor tag </a> perhaps? </Li> <Li> Or a <strong> strong tag </strong> perhaps? </Li> </Ul>   <P> Here's a paragraph too! </P> </Div>

Instance 2

The background image is implemented to prevent text content from being placed below the image when the image is floating.
The advantage of this method is that the code is simple and easy to use. Of course, the premise is that you do not need to add a link to the image.

The code is as follows:

Copy code

<Style type = "text/css"> . Callout { Background: url('logo.gif ') no-repeat 5px 5px; Padding: 5px 5px 5px 230px; Border: 1px solid #999; Width: 60%; Margin: 0 auto; } . Callout h2 { Margin: 0; Padding: 0; } </Style> <Div class = "callout"> <H2> www.111cn.net-aggregates the essence code of small segments <P> During programming, we usually accumulate a lot of simple, effective, and reusable small pieces of code, a simple string processing function or a regular expression that verifies the email address, or a simple file Upload class, or even a good CSS navigation style. These tips save us a lot of time, but after a long time, the number of codes is increasing, and it takes a lot of time to find them. Therefore, this site is committed to collecting and sorting out some similar small knowledge, and strive to improve the quality of the article search, so as to facilitate your reference, and also to support the open source business. </P> </Div>

Instance

The HTML code is as follows:

The code is as follows:

Copy code

<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 ;}

The effect is as follows: