`

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

阅读更多

首先我要说的不是什么基本的浮动原理 ,也不是在使用浮动(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就搞定,至于其他的只需要在样式里定义好就行了,是不是简洁明了啊!~~

 

分享到:
评论

相关推荐

    同向--反向比例--求和电路.sch

    同向--反向比例--求和电路.sch

    高效非反向降压-升压转换器设计技巧总结

    总结而言,高效非反向降压-升压转换器的设计涉及到对电路拓扑结构的深入理解、精确计算和优化,以及对器件特性的合理选择。设计者需要兼顾转换器的效率、尺寸、成本和可靠性等多个因素,以确保在不同应用场景下,...

    用PowerDesigner反向工程生成E-R图

    反向工程可以帮助数据管理员和开发人员快速了解数据库的结构和关系,从而提高数据库的设计和维护效率。 为什么使用PowerDesigner进行反向工程? -------------------------------- PowerDesigner是业界领先的数据...

    行业-电子政务-用于限制反向基极-发射极电压的动态方法.zip

    标题所提到的“用于限制反向基极-发射极电压的动态方法”是电子工程中的一个重要概念,它与晶体管,尤其是双极型晶体管(BJT)的工作原理密切相关。这种技术主要用于保护晶体管免受过高的反向电压损害,确保电子设备...

    Android反编译工具-Android反向工程-Android代码查看器

    使用这些工具进行反向工程时,我们需要了解一些基本概念,例如Android应用的文件结构、Dalvik虚拟机和ART运行时、AndroidManifest.xml的重要性以及如何处理加密和混淆的代码。同时,反编译过程可能会遇到的问题,如...

    Nginx反向代理- 负载均衡

    3、限流,当流量实在过大时,机器无法负载的情况下,反向代理服务器可以限制一部分流量请求服务(让请求失败)。 4、数据预处理,处理请求的数据,让服务端能够识别,以及在服务端的响应数据中添加或者删除一些数据...

    6-Ngnix配置反向代理-http测试应用

    首先,让我们了解什么是反向代理。反向代理是指一种网络服务,它接收来自客户端的请求,并将这些请求转发给内部网络上的一个或多个服务器,然后将服务器的响应返回给客户端。这样做的好处包括负载均衡、安全增强以及...

    神经网络-反向传播算法.zip

    神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-反向传播算法神经网络-...

    抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.pdf

    抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.pdf抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.pdf抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.pdf抓取策略--Web信息检索与数据抓取-...

    抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.ppt

    抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.ppt抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.ppt抓取策略--Web信息检索与数据抓取-反向链接数策略--拓展.ppt抓取策略--Web信息检索与数据抓取-...

    yizt#numpy_neural_network#0_2_5-池化层的反向传播-MaxPooling、AveragePooli

    依赖知识a) 熟悉全连接层、损失函数的反向传播b) 熟悉卷积层的反向传播-多通道、无padding、步长1c) 熟悉池化层Max Pooling、Average

    西安电子科技大学-研究生课程-计算机视觉-期末大作业反向传播-卷积网络

    而“卷积神经网络.doc”很可能是对CNNs的深入分析,包括其结构、工作原理,以及在计算机视觉任务中的具体应用。可能涵盖了经典的CNN模型如LeNet、AlexNet、VGG、GoogLeNet和ResNet等,还有它们的设计理念和创新点。...

    最短路径-Dijkstra-欧洲旅行 数据结构实验

    在本数据结构实验中,我们将探索“最短路径-Dijkstra-欧洲旅行”的概念。这个实验是基于Dijkstra算法,一种广泛用于寻找图中两点间最短路径的算法。在这个特定的场景下,我们假设有一个覆盖整个欧洲的铁路系统,每个...

    期货反向跟单软件--金鹰CTP交易软件

    0. 支持反向下单功能 1. 集成多帐号功能(多帐号可以是不同的期货公司) 2. 独具特色的帐号交易追踪功能(当追踪帐号仓位发生变化时,则对应的交易帐号仓位也发生相应的变化)。 3. 独具特色的交易密码功能(在交易...

    SysKeeper-2000百兆反向隔离装置用户手册.pdf

    SysKeeper-2000百兆反向隔离装置是一款专门用于电力专用网络安全的数据隔离产品,旨在实现安全区域III区到安全区域I/II区之间的单向文本数据传递。该装置采用反向单比特传输方式,利用特定的硬件和软件技术以确保...

    Android-Verso-离线反向地理编码

    在Android开发中,地理编码和反向地理编码是两个重要的概念。地理编码是将地址转换为经纬度坐标的过程,而反向地理编码则是相反的过程,即将经纬度坐标转换为具体的地址信息。对于移动应用而言,尤其在离线环境中,...

    powerdesigne反向数据结构

    ### PowerDesigne反向数据结构解析 #### 一、PDM文件生成流程 **PowerDesigne**是一款功能强大的数据建模工具,它可以帮助用户轻松地进行数据库设计与管理。通过其反向工程功能,可以方便地从现有数据库生成物理...

    ERwin反向导入工程(从数据库把表导入ERwin)

    ERwin 反向导入工程是指从数据库中将表导入到 ERwin 中的过程,在这个过程中,我们可以将数据库中的表结构导入到 ERwin 中,以便进行数据分析和设计。下面是 ERwin 反向导入工程的详细步骤: 1. 打开 ERwin 并新建...

    反向费舍尔 CCI - MetaTrader 5脚本.zip

    【反向费舍尔 CCI - MetaTrader 5脚本】是针对交易者设计的一款增强型技术分析工具,尤其适用于MetaTrader 5交易平台。CCI,全称为Commodity Channel Index(商品通道指数),是由唐纳德·兰伯特开发的,主要用于...

Global site tag (gtag.js) - Google Analytics