这段日子在制作页面时，使用了一种新的写法来混排了图片，文字，列表，觉得不错，放到博客上面，和大家分享一下。
先看一下图片
图文混排
混排的样式大致就是这个样式。

我想说一下我解决这个混排的思路：让左侧图片浮动起来。并且float设为left占位。

html代码是

<div>
<a class="pic" href="#"><img src="images/main_con_pic_01.gif" alt="" />章子怡明星百态</a>
<h2><a href="#">以大压明星撞衫潜演得更好</a></h2>
<p>明星撞衫，不要以为这只是选错一条裙子而已，这是输不起的争名夺利，摆弄它的是整个时尚圈和娱乐圈的名利潜规则...<a class="read_more" title="点击阅读全文" href="#">[全文]</a></p>
<hr />
<ul class="list">
    <li><a href="#">马伊利 PK《奋斗》中的"夏中的"夏中的"</a></li>
    <li><a href="#">丢脸！ 《Elle》《Vogue》封》封》封面</a></li>
    <li><a href="#">李宇春大牌上身 显另类中性感中中性感觉</a></li>
    <li><a href="#">丢脸！ 《Elle》《Vogue》封》封》封面</a></li>
    <li><a href="#">李宇春大牌上身 显另类中性感中中性感觉</a></li>
    <li><a href="#">李宇春大牌上身 显另类中性感中中性感觉</a></li>
    <li class="more"><a href="#">更多&gt;&gt;</a></li>
</ul>
</div>

css的写法

div .pic{
    background-color:#383838;
    float:left;
    margin-right:8px;
    padding:4px 4px 6px;
    position:relative;
    text-align:center;
    z-index:9999;
}
div .pic img{
    border:1px solid #6D6D6D;
    display:block;
    margin-bottom:5px;
}

接下来，就是美化了。这个我就不写啦。大家自由发挥吧。



无觅相关文章插件，快速提升流量