[問題] 關於相簿頁面多張圖片排版問題 CSS

看板Web_Design作者herbacin (herbacin)時間9年前 (2016/05/01 00:05)推噓4(4推 0噓 14→)

留言18則, 8人參與討論串1/1

請問一下目前想透過RWD的方式, 讓相簿頁面的圖片可以依序顯示, 所以使用了display:inline-block css來設定以下是我的css : html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .wrapper { margin: 50px auto; width: 80%; background-color: red; text-align: center; } .insideWrap { display:inline-block } .img-responsive { max-height: 100%; width: auto; margin: 1em; } <body> <div class="wrapper"> <div class="insideWrap"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> <img src="ppt.cc/yHOpA@.jpg" class="img-responsive"> </div> </div> </body> 但當圖片換行後, 如果該行圖片沒有補滿, 該行的圖片會置中, 我想請問有沒有可能把該行的圖片靠左對齊呢? 簡單說一排假設顯示5個, 第二排只有3個的時候, 這3個希望也可以靠左顯示, 不知道有沒有辦法 ~ 謝謝參考圖片 : ppt.cc/IAYZB -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.34.181.227 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1462032352.A.FF7.html

推

ymcheung

05/01 00:33, , 1^F

05/01 00:33, 1^F

→

herbacin

05/01 00:43, , 2^F

05/01 00:43, 2^F

→

herbacin

05/01 00:43, , 3^F

05/01 00:43, 3^F