最近业务需要，想设计一个比较通用的图文混排的列表。结果设计的过程中遇到了不少问题，虽然都是一些css设计中比较基础的问题，但是自己认为有必要总结下，希望可以帮到一些css设计的初学者，同时也想扩大下自己博客的知识量o(^_^)o。
1.最终设计的结果 
HTML（部分，后面的li还有被省略了，当然外面的div也是应该关闭的，大家注意。）代码
<div id=”jingdian” class=”span24 gmodule g-box”>
<div class=”g-box-hd”>
<h3>景点爆棚</h3>
</div>
<div class=”g-box-bd”>
<ul class=”gfixlist gclearfix”>
<li>
<div class=”gfixlist-hd”>
<h3><a href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN”>浙江66万游客争睹海宁潮</a></h3>
</div>
<div class=”gfixlist-bd gclearfix”>
<div class=”pic”>
<a href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN”>
<img src=”http://p1.qhimg.com/d/_hao360/2012/shuangjie/baopeng1.jpg” alt=”浙江66万游客争睹海宁潮”>
</a>
</div>
<div class=”txt”>
<a class=”title” href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN”>浙江66万游客争睹海宁潮浙江66万游客争睹海宁潮</a>
<a class=”gray” href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN”>“八月十八潮，壮观天下无”，非常壮观的海宁潮引来66.5万人次的游客。“八月十八潮，壮观天下无”，非常壮观的海宁潮引来66.5万人次的游客。</a>
<a class=”more red” href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN” >[详细]</a>
</div>
</div>
<div class=”gfixlist-ft”>
<h3><a href=”http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN”>浙江66万游客争睹海宁潮</a></h3>
</div>
</li>
CSS（主要的ul部分）代码：
@charset utf-8;
/* comm gfixlist*/
.gfixlist{padding-bottom: 20px;}
/* 下面的li中的display:inline;纯粹是为了解决IE6下的双边距问题 */
.gfixlist li{_display: inline;float: left;margin: 20px 0 0 20px;text-align: center;width: 290px;}
.gfixlist li .pic{float: left;margin-right: 10px;width: 120px;height: 95px;}
.gfixlist li .txt{float: left;width: 160px;height:92px;overflow: hidden;text-align: left;}
.gfixlist li .txt .title{display: block;color: #16387C;font-weight: bold;white-space: nowrap;}
