作者heavenbetula (绿草)
看板Web_Design
标题[问题] div里放入img的排版问题
时间Sun Nov 30 20:47:36 2014
最近在想练习用css来排版，所以就随便找了个网页来练习
浏览器是用firefox
目前我是用一个div来装所有的img
排完之後发现img与img之间即使margin为0了，依然有个小间隙
如下：
http://ppt.cc/s0m-
使用 display:block 後上下的间隙是没有了，可是版面也乱了：
http://ppt.cc/tZPF
也有使用float:left来试，结果看似很完美，但是只要我缩小浏览器的宽度
就变的跟上面第二个情况(display:block)一样了...又试着将div设一个宽度
虽然不会随浏览器缩小而版面乱掉，但是整个画面靠左，无法置中：
http://ppt.cc/3OkU
总之我想要 img与img 间不要有间隙，然後整个画面可以置中，又不会因浏览器缩放
而版面被变动的话，请问该怎麽做呢？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.228.76.162
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1417351658.A.5AA.html
1F：推 oToToT: CSS reset?? 11/30 22:06
2F：→ oToToT: 还是你img 宽高用% 11/30 22:06
宽高我有直接下图片的宽高，没有用%，至於css reset，我只有在body的部分下
margin:0; padding:0; 不知道还要下什麽指令呢？
※ 编辑: heavenbetula (61.228.76.162), 11/30/2014 22:10:05
3F：→ mmis1000: font-size:0px; vertical-align:middle; 这样？ 11/30 23:24
4F：→ mmis1000: 或是float:left 11/30 23:25
5F：→ mmis1000: 然後把装img的容器整个置中 11/30 23:36
作者: heavenbetula (绿草) 看板: Web_Design
标题: [问题] div里放入img的排版问题
时间: Sun Nov 30 20:47:36 2014
最近在想练习用css来排版，所以就随便找了个网页来练习
浏览器是用firefox
目前我是用一个div来装所有的img
排完之後发现img与img之间即使margin为0了，依然有个小间隙
如下：
http://ppt.cc/s0m-
使用 display:block 後上下的间隙是没有了，可是版面也乱了：
http://ppt.cc/tZPF
也有使用float:left来试，结果看似很完美，但是只要我缩小浏览器的宽度
就变的跟上面第二个情况(display:block)一样了...又试着将div设一个宽度
虽然不会随浏览器缩小而版面乱掉，但是整个画面靠左，无法置中：
http://ppt.cc/3OkU
总之我想要 img与img 间不要有间隙，然後整个画面可以置中，又不会因浏览器缩放
而版面被变动的话，请问该怎麽做呢？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.228.76.162
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1417351658.A.5AA.html
6F：推 oToToT: CSS reset?? 11/30 22:06
7F：→ oToToT: 还是你img 宽高用% 11/30 22:06
宽高我有直接下图片的宽高，没有用%，至於css reset，我只有在body的部分下
margin:0; padding:0; 不知道还要下什麽指令呢？
※ 编辑: heavenbetula (61.228.76.162), 11/30/2014 22:10:05
8F：→ mmis1000: font-size:0px; vertical-align:middle; 这样？ 11/30 23:24
9F：→ mmis1000: 或是float:left 11/30 23:25
10F：→ mmis1000: 然後把装img的容器整个置中 11/30 23:36
我使用font-size:0;并且将装img的div容器宽度设定成与img layout完整图的宽度一样
(956px)，然後margin:0 auto;就有达到我要的结果了
只是有个很奇怪的地方，就是我装img容器的div宽度设大一点(1100px)
或设小一点(800px)整个版面又都乱了...
所以请想问在这边比较适合的水平置中方式是什麽呢？
※ 编辑: heavenbetula (61.230.30.45), 12/01/2014 19:21:28
11F：→ Rplus: 这切图方式感觉有点像是 table... 12/04 01:46
我是用div > <....
※ 编辑: heavenbetula (114.35.24.12), 12/07/2014 22:50:18