用DIV+CSS的方法实现2行5列图片的排版

最近看到一些朋友经常问一些div+css排版的问题..现将方法总结出来

.入正题

我们通过采用div+css布局,可以轻松实现2行5列图片的排版样式.

原理: 设定一个div(box)作为容器,我们所有的图片都放在其中.在图片宽度一定的情况下,我

们可以通过设定box的宽度来控制每行显示的图片数,即图片的列数.比如在本例中,图片大小为

128x128,那么设定box宽度为640的话,每行就能显示5张图片.然后我们控制图片的总数为10,

就实现了2行5列的图片排版.可以看出,这个排版是由css控制实现的.

比如以下代码

1. [html]
   
2. <div class="box">
   
3. <div class="image"><img src="images/demo.png"></div>
   
4. <div class="image"><img src="images/demo.png"></div>
   
5. <div class="image"><img src="images/demo.png"></div>
   
6. <div class="image"><img src="images/demo.png"></div>
   
7. <div class="image"><img src="images/demo.png"></div>
   
8. <div class="image"><img src="images/demo.png"></div>
   
9. <div class="image"><img src="images/demo.png"></div>
   
10. <div class="image"><img src="images/demo.png"></div>
    
11. <div class="image"><img src="images/demo.png"></div>
    
12. <div class="image"><img src="images/demo.png"></div>
    
13. <div class="clear"></div>
    
14. </div>
    
15. [/html]

复制代码

我们用div(box)作容器放所有图片.为了实现图片排列的整齐划一,我们用div (image)放单个图片,通过控制div(image)的样式来实现.
其样式文件如下

1. [html]
   
2. .box {
   
3. width:700px;
   
4. border:1px solid #ccc;
   
5. background:#fff;
   
6. margin:0px auto;
   
7. padding:0px;
   
8. }
   
9. .image {
   
10. float:left;
    
11. border:1px solid #ccc;
    
12. margin:3px 3px;
    
13. padding:2px;
    
14. display: inline;
    
15. }
    
16. .clear {clear:both;}
    
17. [/html]

复制代码

这段css的关键在于.box里宽度(width)值的设定.下面我们来看一下如何设定这个值才合理.

1 设定div(image)的边框属性,形成一个图片框.

2 .image里设定padding:2px,实现图片与图片框之间有2个象素的距离,比较美观.

3.image里设定margin:3px 3px ,实现各图片框之间有3+3=6象素的间距,美观.

4.计算div(box)的宽度值.每张图片宽128,5张一共128*5=640;图片框左右各有3px的外边距,

5个一共3*2*5=30;图片框左右各有2px的内边距,5个一共2*2*5=20,图片框左右边框均为1px,5个共1*2*5=10;所以box的宽度该设定为640+30+20+10=700.

实事上这个值并不是如此严格,我们设定为720怎么样?720-100=20,20px的宽度显然放不下一张128px的图片,因此显示的仍是5列.如果这个剩余的宽度大于一张图

片的宽度了,那么下一行最前一张图片就会填充到这一行的最后,变成6列.同样,如果宽度设定小于700px了,那么就会把这一行最后的图片挤到下一行,同样是不行的.

秋之子历害

我试试看谢谢楼主啊

不错

秋之子历害

其实没必要每张图片都用div
  
只用一个div 然后左浮动
能出一样的效果

   1. [html]
   2. <div class="box">
   3. <dl><dt><img src="images/demo.png"></dt>
   4. <dt><img src="images/demo.png"></dt>
   5. <dt><img src="images/demo.png"></dt>
   6. <dt><img src="images/demo.png"></dt>
   7. <dt><img src="images/demo.png"></dt>
   8. <dt><img src="images/demo.png"></dt>
   9. <dt><img src="images/demo.png"></dt>
  10. <dt><img src="images/demo.png"></dt>
  11. <dt><img src="images/demo.png"></dt>
  12. <dt><img src="images/demo.png"></dt>
  13. <dl>
  14. </div>
  15. [/html]

原理差不多，关键是float：left就行

学习了。。。。。。。