通过定位控制信息列表下往上的增加
作者：林小志 来源：林小志blog 发布时间：2008-06-30 14:27:00
标签：定位,列表,css
在一个页面制作过程，突然被设计稿上的一个问题难住了，思路一时没打开，后来在费人的提醒下，用定位控制，顺利完成。
这个是我做的大概的示意图，主要的功能就是文字那块，如果再增加一行，比如发布日期：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;}
为了方便测试，可以修改内容再运行一下
0
投稿猜你喜欢
前言在微信小程序开发中，navigator 用来实现页面路由功能，比如 A页面 中点击页面打开B页面1 navigator 默认方式打开新的- python的pdb调试命令的命令整理及实例一、命令整理pdb调试命令完整命令简写命令描述argsa打印当前函数的参数breakb设置断点c
- 1 前言前面已经讲了很多次要进行数据存储，终于在上一篇中完成了数据库的设计，在这一篇就开始数据的存储操作，在数据存储的这个部分，会将之前抓取
- python可以简单优美，也很有趣，下面是收集的例子：1.一句话开始一个http的文件服务器:$ python -m SimpleHTTPS
- 1、在mysql 中建立一个数据库 test1 语句：create database test1 2、创建表examinfo create
- python实现监听键盘，供大家参考，具体内容如下实现服务端import picklefrom io import BytesIOimpor
- 1. 扩展Tensor维度相信刚接触Pytorch的宝宝们，会遇到这样一个问题，输入的数据维度和实验需要维度不一致，输入的可能是2维数据或3
- 该方是基于uiautomator2如下版本进行验证的：PS C:\windows\system32> pip show uiautom
- 字符串中字符大小写的变换1. str.lower() //小写>>> 'SkatE'.lower()
- 1. set 的基本内容1.基本特点(1) 无序性(2) 确定性(3) 不重复性2.set() 实质内部进行 可迭代性的 for 循环例子：
- 相信用过thinkphp的用户都知道thinkphp的模型可以完成很多辅助功能，比如自动验证、自动完成等，今天在开发中遇到自动完成中需要获取
- 本文实例讲述了python使用xlrd实现检索excel中某列含有指定字符串记录的方法。分享给大家供大家参考。具体分析如下：这里利用xlrd
- 今天因为做一个效果的时候需要CSS的定位来实现，于是我就根据自己原来对CSS的了解，用absolute和relative摆弄了好一阵子，总是
- 一、作用创建一个新的Tensor，该Tensor的type和device都和原有Tensor一致，且无内容。二、使用方法如果随机定义一个大小
- 本文实例讲述了Python实现去除列表中重复元素的方法。分享给大家供大家参考，具体如下：这里一共使用了四种方法来去除列表中的重复元素，下面是
- 关于缓存剩下的问题是数据的隐私性以及在级联缓存中数据应该在何处储存的问题。通常用户将会面对两种缓存： 他或她自己的浏览器缓存（私有缓存）以及
- 导语嘿嘿！木木子今日闪现——已经给大家写了很多内容啦~涉及的人工智能、初学者、爬虫、数据分析（这方面
- 简单来说python的内存管理机制有三种1）引用计数2）垃圾回收3）内存池接下来我们来详细讲解这三种管理机制1，引用计数：引用计
- 本文实例讲述了Go语言中的匿名结构体用法。分享给大家供大家参考。具体实现方法如下：package main
- 目录1)Golang字符串包含功能[区分大小写]2)Golang ContainsAny()[区分大小写]3)Golang Count()
