作者herbacin (herbacin)
看板Web_Design
標題[問題] 關於相簿頁面多張圖片排版問題 CSS
時間Sun May 1 00:05:50 2016
請問一下 目前想透過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: 把 wrapper 的 text-align: center 拿掉就好了？ 05/01 00:33
→ herbacin: 拿掉所有內容都會靠左, 我需要內容置中 05/01 00:43
→ herbacin: 但不滿5個的圖片可以靠左對齊 05/01 00:43
→ herbacin: 不知這樣css可以做得到嗎 05/01 00:44
推 shter: 這種情況不是應該用 float:left 去排版? 05/01 08:48
→ akccakcctw: 我的解法後面要預先補上一些空元素 05/01 11:27
→ owentseng: 用float:left 就好了吧 05/01 22:25
→ Ken52039: float:left 會左右留白不對稱 05/01 22:32
→ Ken52039: 樓上這個沒有RWD啊 縮小視窗都擠在一起了 05/02 10:33
→ wukoto: 那只要調整一下就好了，現在應該不會了。 05/02 15:59
→ Ken52039: 樓上 樓主不是要這種效果啊 他是要圖的大小不變 但是 05/02 15:59
→ Ken52039: 要可以隨螢幕排列 有時一排五個 有時一排四個 05/02 16:00
→ wukoto: 那我可能會錯意了，請把我上面的推文刪除以免誤導。 05/02 16:41
→ miau: 依需求沒辦法這麼輕鬆RWD，只能針對不同寬度下 media query 05/02 16:44
→ Ken52039: 對啊，其實我也很好奇大家的解法～結果好像只能用寬度去 05/03 15:49
→ Ken52039: 去下CSS 05/03 15:50