通过定位控制信息列表下往上的增加
作者：林小志 来源：林小志blog 时间：2008-06-30 14:27:00
在一个页面制作过程，突然被设计稿上的一个问题难住了，思路一时没打开，后来在费人的提醒下，用定位控制，顺利完成。
这个是我做的大概的示意图，主要的功能就是文字那块，如果再增加一行，比如发布日期：2008-6-4，那就要底部对齐向上增加。所以前期如果用margin或者padding制作了一个效果，后期修改很麻烦，而改用定位就不同了。
xhtml结构：
程序代码
<div class="product">
<img src="images/product.jpg" alt="" />
<div class="proInfo">
<dl>
<dt>产品名称：</dt>
<dd>软件名称</dd>
<dt>版 本 号：</dt>
<dd>5.8.1.507</dd>
<dt>软件大小：</dt>
<dd>7.38MB</dd>
<dt>发布日期：</dt>
<dd>2008.05.27</dd>
</dl>
<div class="btns"><a href="#" title="官方下载">官方下载</a></div>
</div>
</div>
CSS样式：
* {margin:0;padding:0;}
body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, "宋体",sans-serif;}
.product {width:520px;height:auto;overflow:hidden;zoom:1;margin:10px auto;}
.product img {float:left;width:220px;height:140px;border:1px solid #AECFDF;}
.proInfo {float:right;width:250px;height:150px;position:relative;}
.proInfo dl {width:250px;height:auto;overflow:hidden;zoom:1;position:absolute;bottom:40px;right:0;}
.proInfo dl dt, .proInfo dl dd {float:left;width:60px;height:20px;line-height:20px;color:#484848;}
.proInfo dl dd {width:190px;}
.btns {width:250px;height:40px;position:absolute;bottom:-9px;right:0;}
.btns a {float:left;display:block;width:76px;height:35px;margin-right:10px;}
为了方便测试，可以修改内容再运行一下
标签：定位,列表,css
0
投稿猜你喜欢
优化Oracle库表设计的若干方法
2010-07-16 13:24:00
微软雅黑的设计
2010-02-23 20:36:00
使用SSIS创建同步数据库数据任务的方法
2012-11-30 19:53:44
解决python spyder 突然打不开的问题
2022-07-07 19:43:06
sql server关键字详解大全（图文）
2024-01-14 09:43:13
python百行代码自制电脑端网速悬浮窗的实现
2023-02-03 21:52:57
keras CNN卷积核可视化,热度图教程
2021-03-15 05:06:15
Centos7 下Mysql5.7.19安装教程详解
2024-01-25 08:28:18
django admin 根据choice字段选择的不同来显示不同的页面方式
2022-04-26 06:39:10
Mysql设置主键自动增长起始值的方案总结
2024-01-16 18:49:23
Python实现PS滤镜中马赛克效果示例
2021-05-25 20:56:59
python爬虫获取新浪新闻教学
2021-10-13 11:15:41
Mysql json类型字段Java+Mybatis数据字典功能的实践方式
2024-01-22 00:24:34
python求斐波那契数列示例分享
2022-07-20 19:32:10
Python 爬虫学习笔记之多线程爬虫
2022-10-03 15:10:37
Golang并发编程之Channel详解
2024-05-09 14:58:42
Python将阿拉伯数字转换为罗马数字的方法
2022-11-15 16:07:14
SqlServer 巧妙解决多条件组合查询
2023-07-01 14:15:00
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2022-04-19 21:35:31
MySql导入CSV文件或制表符分割的文件
2024-01-19 07:43:54
