[问题] 关于相簿页面多张图片排版问题 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