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

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

Links booklink

Contact Us: admin [ a t ] ucptt.com