※ 本文為 ott 轉寄自 ptt.cc 更新時間: 2014-12-02 06:42:15
看板 Web_Design
作者 heavenbetula (綠草)
標題 [問題] 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://www.ptt.cc/bbs/Web_Design/M.1417351658.A.5AA.html
oToToT: CSS reset??1F 11/30 22:06
oToToT: 還是你img 寬高用%

寬高我有直接下圖片的寬高,沒有用%,至於css reset,我只有在body的部分下

margin:0; padding:0;  不知道還要下什麼指令呢?
※ 編輯: heavenbetula (61.228.76.162), 11/30/2014 22:10:05
mmis1000: font-size:0px; vertical-align:middle; 這樣?3F 11/30 23:24
mmis1000: 或是float:left
mmis1000: 然後把裝img的容器整個置中
看板 Web_Design
作者 heavenbetula (綠草)
標題 [問題] 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://www.ptt.cc/bbs/Web_Design/M.1417351658.A.5AA.html
oToToT: CSS reset??1F 11/30 22:06
oToToT: 還是你img 寬高用%

寬高我有直接下圖片的寬高,沒有用%,至於css reset,我只有在body的部分下

margin:0; padding:0;  不知道還要下什麼指令呢?
※ 編輯: heavenbetula (61.228.76.162), 11/30/2014 22:10:05
mmis1000: font-size:0px; vertical-align:middle; 這樣?3F 11/30 23:24
mmis1000: 或是float:left
mmis1000: 然後把裝img的容器整個置中

我使用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

--
※ 看板: ott 文章推薦值: 0 目前人氣: 0 累積人氣: 163 
分享網址: 複製 已複製
guest
x)推文 r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇