tiger.passion

2008-02-09

反向浮动-让我们的页面结构更加简洁

关键字: 反向浮动

首先我要说的不是什么基本的浮动原理，也不是在使用浮动（float）时的一些bug及相关的解决办法。这里我所要说的是用反向浮动来处理元组列表，这是个十分不错的用法，它让我们的页面结构更加简洁，当然这里所说元组由多条数据信息组成的。

<div id="list">
<dl>
   <dt>用户名：Kevior　　作品名：魅力无限</dt>
<dd class="img"><img src="images/photo1.jpg" mce_src="images/photo1.jpg"></dd>
<dd>
<p>更新日期：2007-12-21</p>
<p>点击数：581   　　　　得票数：182</p>
<p>参加的活动：无 </p>
<p>作品描述：新时代明星也瞬间登上了明星的行列</p> </dd>
</dl>
<dl>
   <dt>用户名：Kevior　　作品名：魅力无限</dt>
<dd class="img"><img src="images/photo1.jpg" mce_src="images/photo1.jpg"></dd>
<dd>
<p>更新日期：2007-12-21</p>
<p>点击数：581   　　　　得票数：182</p>
<p>参加的活动：无 </p>
<p>作品描述：新时代明星也瞬间登上了明星的行列</p> </dd>
</dl>
</div>

css

 
#list{float:left;width:647px; margin:20px; display:inline; }
#list dl { float:left;width:647px;border:1px dotted #d4d9a0; margin-bottom:20px; display:inline;}
#list dt{ float:right; width:488px; height:28px;line-height:28px; margin:10px 0 10px 0; background:url(../images/dt-bg.jpg) repeat-x left top; padding:0; text-indent:10px; font-size:12px; letter-spacing:1px; color:#fff;}
#list dd{margin: 0 0 0 159px;padding:0; font-size:12px; text-indent:10px; line-height:1.5em; color:#fff;}
#list dl dd.img{ margin:0;}
#list dd.img img{ float:left; padding:10px;}

以上就是51shai活动页面参与者信息列表页的主内容结构，一个div、一个dl就搞定，至于其他的只需要在样式里定义好就行了，是不是简洁明了啊！~~