作者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/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
<img src="ppt.cc/
[email protected]" class="img-responsive">
</div>
</div>
</body>
但当图片换行後, 如果该行图片没有补满, 该行的图片会置中,
我想请问有没有可能把该行的图片靠左对齐呢?
简单说一排假设显示5个, 第二排只有3个的时候, 这3个希望也可以靠左显示,
不知道有没有办法 ~ 谢谢
参考图片 : ppt.cc/IAYZB
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.34.181.227
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1462032352.A.FF7.html
1F：推 ymcheung: 把 wrapper 的 text-align: center 拿掉就好了？ 05/01 00:33
2F：→ herbacin: 拿掉所有内容都会靠左, 我需要内容置中 05/01 00:43
3F：→ herbacin: 但不满5个的图片可以靠左对齐 05/01 00:43
4F：→ herbacin: 不知这样css可以做得到吗 05/01 00:44
5F：推 shter: 这种情况不是应该用 float:left 去排版? 05/01 08:48
7F：→ akccakcctw: 我的解法後面要预先补上一些空元素 05/01 11:27
8F：→ owentseng: 用float:left 就好了吧 05/01 22:25
9F：→ Ken52039: float:left 会左右留白不对称 05/01 22:32
11F：→ Ken52039: 楼上这个没有RWD啊 缩小视窗都挤在一起了 05/02 10:33
12F：→ wukoto: 那只要调整一下就好了，现在应该不会了。 05/02 15:59
13F：→ Ken52039: 楼上 楼主不是要这种效果啊 他是要图的大小不变 但是 05/02 15:59
14F：→ Ken52039: 要可以随萤幕排列 有时一排五个 有时一排四个 05/02 16:00
15F：→ wukoto: 那我可能会错意了，请把我上面的推文删除以免误导。 05/02 16:41
16F：→ miau: 依需求没办法这麽轻松RWD，只能针对不同宽度下 media query 05/02 16:44
17F：→ Ken52039: 对啊，其实我也很好奇大家的解法～结果好像只能用宽度去 05/03 15:49
18F：→ Ken52039: 去下CSS 05/03 15:50