Ultra-full css solution-text-and-text hybrid layout solution and css Solution

Ultra-full css solution-text-and-text hybrid layout solution and css Solution
Method 1: Background Image

This method is applicable to non-dynamic content, where images are used for decoration. It is mainly to set the padding width of the parent element to the width of the background image plus the padding of the text, and then locate the background image to the padding.

Demo1 is a mix of text and text, and the background image method // because it is reprinted, I am a newbie. The pictures below are messy. The correct picture and text are all in one line.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Html code

<div id="demo1">  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

Css code

#demo1{    background:url('images/img150-118.jpg') no-repeat;    padding-left:160px;    width:210px;}

 

Method 2: Floating Method

This method is flexible and should be a classic application of float. The idea is to set float and width for both the left and right elements. However, be sure to clear the floating of sub-elements and double margin of ie6. Otherwise, the error effect or layout of other elements will be affected.

Demo2, float

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus regular, tortor neque egestas augue, eu region magna eros eu erat. Aliquam erat volutpat. Nam dui mi, quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec limit ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Html code

<Div id = "demo2" class = "clearfix">  <div class = "flo-right"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <ul> <li> Morbi in sem quis dui placerat ornare. pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. sed arcu. cras consequat. </li> <li> Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </li> </ul> <p> Phasellus ultrices nulla quis nibh. quisque a lectus. donec consectetuer ligula vulputate sem tristique cursus. nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. </p> <p> Pellentesque fermentum dolor. aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. </p> </div>

 

Css code

#demo2 img,#demo2 .flo-right{    float:left;    display:inline;}#demo2 .flo-right{    margin-left:10px;    width:400px;}

 

Method 3: overflow

The html code of this method is the same as the Floating Method. Here, the id is changed to facilitate the test demo. The idea is to float the elements on the left, and set overflow to hidden for the elements on the right, which is perfectly compatible (note that the elements on the left under ie6 are floating, and the elements on the right are not floating with a 3px margin)

Demo3 and overflow

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus regular, tortor neque egestas augue, eu region magna eros eu erat. Aliquam erat volutpat. Nam dui mi, quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec limit ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Css code

#demo3 img{    float:left;    display:inline;    margin-right:10px;}#demo3 .flo-right{    overflow:hidden;    width:400px;}

 

Method 4: relative absolute positioning

The html code can be the same as the above two types. You can also remove the div whose class is flo-right. That is, the elements on the right do not need to be packaged in a div, here, I removed this package and checked it through firebug. Here, the html is not in front, but in other places. As shown in the demo below, I put the image behind the p tag.

Image and text mixing demo 4, relative absolute positioning method

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus regular, tortor neque egestas augue, eu region magna eros eu erat. Aliquam erat volutpat. Nam dui mi, quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec limit ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Css code

#demo4{    position:relative;    padding-left:210px;}#demo4 img{    position:absolute;    left:0;    top:0;}

 

Method 5: float and padding

This method was discovered by accident in practice. For the content on the right, no elements are needed to wrap it. Set padding-left for the div of the entire package image and text, then img sets the left floating and negative left margin to be equal to the padding-left value of its parent element. (The 3px bug of ie6 also appears here)

Graphic and text mixing demo 6, float plus padding method

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus regular, tortor neque egestas augue, eu region magna eros eu erat. Aliquam erat volutpat. Nam dui mi, quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec limit ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Css code

#demo6{    padding-left:210px;}#demo6 img{    float:left;    margin-left:-210px;}

 

Interactive text Mixing

This situation is more suitable for customers who want to change. Interactive arrangement between left and right is really better than a single one. You can add a class in the even row or use the css3 selector to select an even row (:nth-child(2n)) To achieve this effect, this instance uses the class that adds an fr to the even row.

Graphic and text mixing demo 5, Interactive Graphic and text mixing Name of the event

Suspendisse potenti. nulla non lacus purus, non accumsan risus. nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. nullam at nunc eros, sit amet tempor ante. curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. suspendisse nibh est, tincidunt at luctus congue.

See detail...

Name of the event

Suspendisse potenti. nulla non lacus purus, non accumsan risus. nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. nullam at nunc eros, sit amet tempor ante. curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. suspendisse nibh est, tincidunt at luctus congue.

See detail...

Html code

<div id="demo5" class="demo">    <div class="events_item">       <div class="events_intro fr">        
 
Css code
#demo5 .events_item {    border-bottom: 1px solid #E2E2E2;    clear: both;    overflow: hidden;    padding: 20px 0;    width: 620px;}#demo5 .events_intro {    float:left;    display:inline;    width: 370px;}#demo5 .fr{    float:right;}#demo5 img{    float:left;}#demo5 .events_intro h3 {    background: none repeat scroll 0 0 #C13832;    color: #FFFFFF;    font-size: 14px;    line-height: 25px;    padding-left: 10px;    text-transform: uppercase;}#demo5 .events_intro p {    line-height: 1.5;    padding: 10px;    margin:0;}#demo5 .events_intro .more {    padding: 0;    text-align: right;}#demo5 .more a {    color: #C13832;    margin-right: 20px;    text-decoration: underline;}
Note: The text-to-text mixing in this article means that the image and text occupy one side and do not interfere with each other. You can directly set the float of the image for the text around the image. This is relatively simple and will not be introduced here.


Original article www.w3cplus.com