css 图文混排3-图文左右交替

 今天看雅虎的文章时，发现右边图文混排的CSS写的有一个小技巧！在此收录一下！

效果图：

 

html:

<div class="box">

<div class="head"><h3>热门点播</h3></div>

<div class="body">

<ul class="list">

<li>

<a class="img" href="#"><img src=\'#\'" src=\'#\'" //cn.yimg.com/cuo/6.jpg" width="114" height="84" alt="" /></a>

<p></p>

<h4><a href="#">不是我老婆的过错</a></h4>

看着曾经跟别人跑的妻子如今瘫痪在床，他不怪妻子，只能怪自己太穷… 

<a href="#">[详细]</a>

<p></p>

</li>

<li>

<a class="img" href="#"><img src=\'#\'" src=\'#\'" //cn.yimg.com/cuo/6.jpg" width="114" height="84" alt="" /></a>

<h4><a href="#">不是我老婆的过错</a></h4>

看着曾经跟别人跑的妻子如今瘫痪在床，他不怪妻子，只能怪自己太穷… 

<a href="#">[详细]</a>

</li>

</ul>

</div>

</div>

CSS:

<style type="text/css">

*{

margin:0;

padding:0;

font-size:12px;

}

.box{

width:300px;

border:solid 1px #c6d8e0;

}

.box .head{

background: url(http://cn.yimg.com/news/2011/08/24/images/cbox_head.png);

height: 33px;

}

.box .head h3{

padding-left:5px;

font-size:14px;

line-height:33px;

}

.box .body{

padding:4px 10px;

}

.box .body .list{

overflow:hidden;

}

.box .body .list li{

list-style:none;

border-top: dashed 1px #CCC;

margin-top: -1px;

padding: 10px 0 10px 0;

line-height: 20px;

}

.box .body .list .img{

float: left;

display: block;

text-align: center;

}

.box .body .list h4{

padding-bottom:8px;

}

.box .body .list a img{

display:block;

border:1px solid #CCC;

padding:2px;

margin-right:10px;

}

</style>

看到上图肯定想到的是用ul排，然后给li 一个border 形成虚线！然后给最前面一个特定class ，然后定义boder:none(若设置的 li boder-top:xxxxx),反之给最后 li 特定class。而在雅虎的页面上却没有那种class。然后就用firebug找，果然不负有心人啊！让我找到了！他是这样处理的

首先ul标签一个overflow:hidden;li 的boder-top:1px dashed #CCC; margin-top:-1px;重点就在margin-top上。-1 使得li的内容超出了ul规定的范围正好overflow:hidden,超出范围隐藏！看出去好像就没有了！代码在附件里！睡觉喽！

本文出自 “osweb” 博客，转载请与作者联系！