问题：关于一个坛友的html布局实现_html/css_WEB-ITnose

来源：http://www.ido321.com/888.html

坛友的需求如图

这个跟上次贴友分类菜单的实现类似

html：

   1: 

   2:     

   3:         

   4:             

   5:             
图片标题

   6:             编辑  删除

   7:         

   8:         

   9:             

  10:             
图片标题

  11:             编辑  删除

  12:         

  13:         

  14:             

  15:             
图片标题

  16:             编辑  删除

  17:         

  18:     

  19: 

css:

   1: *

   2: {

   3:     margin: 0 auto;

   4: }

   5: .test

   6: {

   7:     width: 400px;

   8:     height: 500px;

   9:     border: 1px solid black;

  10: }

  11: .test div

  12: {

  13:     border-bottom: 2px solid #ccc;

  14:     height: 150px;

  15:     width: 350px;

  16:     margin-top: 10px;

  17:     margin-bottom: 5px;

  18:     position: relative;

  19: }

  20: h3

  21: {

  22:     position: absolute;

  23:     left: 155px;

  24:     top: 55px;

  25: }

  26: span

  27: {

  28:     position: absolute;

  29:     top: 58px;

  30:     left: 250px;

  31:     font-weight: bold;

  32: }

  33: a{

  34:     color: #000;

  35:     text-decoration: none;

  36: }

  37: a:hover

  38: {

  39:     color: #000;

  40:     text-decoration: none;

  41: }

效果：