自适应的图文混排

看到这篇,补充一个:

<!DOCTYPE html>  
<html>

<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
<title>自适应的图文混排</title>  
<link href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" rel="stylesheet">  
<style>  
.clearfix:before, .clearfix:after{content:".";display:block;height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{#zoom:1;}
.media{margin:10px;}
.media .bd{overflow:hidden;#zoom:1;} /* 这句是关键 */
.media .img{float:left;margin-right:10px;_margin-right:7px;}
.media .img img{display:block;}
</style>  
</head>

<body>

<div class="media clearfix">  
    <div class="img">
        <img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="100">
    </div>
    <div class="bd">
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
    </div>
</div>  
<div class="media clearfix">  
    <div class="img">
        <img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="200">
    </div>
    <div class="bd">
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
    </div>
</div>  
<div class="media clearfix">  
    <div class="img">
        <img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="300">
    </div>
    <div class="bd">
        <p>人不是鱼,怎会了解鱼的忧愁。鱼不是鸟,怎会了解鸟的快乐。鸟不是人,怎会了解人的荒唐。人不是鸟,怎会了解鸟的自由。鸟不是鱼,怎会了解鱼的深沉。鱼不是人,怎会了解人的幼稚。你不是我,怎会了解我</p>
    </div>
</div>

</body>

</html>  

更灵活之处

  • 兼容标准模式与怪异模式
  • 无需顾及图片尺寸
  • 避免relative带来的reflow bug、z-index bug等
  • 代码更少

该方法源自oocssmedia,原理见Overflow – a secret benefit肉饼有翻译OverFlow – 一个秘密武器

注:清除浮动参见YUI的clearfix Reloaded + overflow:hidden Demystified小李刀刀的翻译clearfix改良及overflow:hidden详解