随机大小图片居底居中显示

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 5)
Loading ... Loading ...

做图片展示的时候用到过这类效果，但是没有用CSS写出来效果。今天突然想起来淘宝UED考试题里的一道题目是居底，居中。看了下代码，做了下修改就实现了我想要的结果。SNAKE同学用的是用另一种实现手段。
我改的：

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="Robots" content="index,follow">
  5. </meta><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6. </meta><meta name="keywords" content="">
  7. </meta><meta name="description" content="">
  8. <style>
  9. <!--
  10. .box { width:500px; height:500px; border: 1px solid #CCC; display: table-cell; *display: block; *font-size: 175px; vertical-align:bottom; text-align:center;}
  11. .box img{ vertical-align:bottom; }
  12. -->
  13. </style>
  14. <title></title>
  15. </meta></head>
  16.  
  17. <body>
  18. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:100px;height:100px;" /></div>
  19. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:150px;height:150px;" /></div>
  20. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:10px;height:100px;" /></div>
  21. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:100px;height:10px;" /></div>
  22. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:50px;height:60px;" /></div>
  23. </body>
  24. </html>

SNAKE同学的

  1. <style type="text/css" media="screen">
  2. <!--
  3. #snake { overflow: hidden; zoom: 1; }
  4. #snake dl { float: left; height: 240px; width: 200px; margin: 0 0 0 20px; position: relative; background: #FFC8D0; }
  5. #snake dl dt { position: absolute; bottom: 30px; width: 200px; text-align: center; }
  6. #snake dl dt img {  }
  7. #snake dl dd { position: absolute; bottom: 0px; width: 200px; margin: 0; text-align: center; }
  8. -->
  9. </style>
  10. <div id="snake">
  11.  <dl>
  12.   <dt><img src="http://www.baidu.com/img/logo.gif" width="200" height="200" /></dt>
  13.   <dd>SNAKE</dd>
  14.  </dl>
  15.  <dl>
  16.   <dt><img src="http://www.baidu.com/img/logo.gif"  width="150"  height="150"/></dt>
  17.   <dd>SNAKE</dd>
  18.  </dl>
  19.  <dl>
  20.   <dt><img src="http://www.baidu.com/img/logo.gif" width="100" height="100" /></dt>
  21.   <dd>SNAKE</dd>
  22.  </dl>
  23.  <dl>
  24.   <dt><img src="http://www.baidu.com/img/logo.gif"  width="80"  height="150"/></dt>
  25.   <dd>SNAKE</dd>
  26.  </dl>
  27. </div>

你可能对这个有点兴趣：

可乐发表于:05-28-08

看完了说点啥？