作者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/m.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/m.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