位置：首页>> 网络编程>> 网页设计>> 通过定位控制信息列表下往上的增加

通过定位控制信息列表下往上的增加

作者：林小志　来源：林小志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;}

为了方便测试，可以修改内容再运行一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author" content="Linxz linxz@vip.qq.com" /><meta name="Keywords" content="linxz,林小志,产品信息,定位控制,position" /><meta name="Description" content="在产品展示中，对于信息列表不确定，内容增加的放心是向上增加的一个测试" /><style type="text/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;}.visitor {width:828px;height:30px;margin:10px auto 0;text-align:right;}</style><title>信息列表由下向上增加的方式</title></head><body><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></body></html>

投稿

通过定位控制信息列表下往上的增加

猜你喜欢