超全css解决方案之图文混排解决方案

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

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

<div id="demo2" class="clearfix">
    <img src="images/img200-150.jpg" alt="浮动法demo">
    <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>
</div>

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

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

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

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

<div id="demo5" class="demo">
    <div class="events_item"> 
      <div class="events_intro fr">
        <h3>Name of the event</h3>
        <p>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.</p>
        <p class="more"><a href="#">see detail...</a></p>
      </div>
      <img src="images/img250-165.jpg">
    </div>
    <div class="events_item">
      <div class="events_intro">
        <h3>Name of the event</h3>
        <p>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.</p>
        <p class="more"><a href="#">see detail...</a></p>
      </div>
      <img src="images/img250-165.jpg">  
    </div>
</div>

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