你的位置:首页 > 软件开发 > 网页设计 > css图片响应式+垂直水平居中2

css图片响应式+垂直水平居中2

发布时间:2015-08-26 23:00:04
转载请注明: TheViper http://www.cnblogs.com/TheViper 上一篇说的是限定图片组最大宽度情况下,其中图片的响应式+垂直水平居中。实际上,结合本屌的这篇模拟flexbox justify-content的space-between, ...

转载请注明: TheViper http://www.cnblogs.com/TheViper 

上一篇说的是限定图片组最大宽度情况下,其中图片的响应式+垂直水平居中。

实际上,结合本屌的这篇模拟flexbox justify-content的space-between,space-around,然后不限定图片组最大宽度,会发现当浏览器窗口较宽的时候,会出现和flexbox space-between一样的效果,即一行的第一个图片在最左边,最后一个图片在最右边,图片间间距一样。此时设置图片间的百分比形式左右margin,相当于设置图片间间距的最小值,一旦间距达到最小值,窗口再小的话,图片会跳到下一行。而当浏览器窗口不够宽时,就会出现和上一篇中一样的效果。

看看效果

css图片响应式+垂直水平居中2

实现

1.给包裹图片的li

  li{    list-style-type: none;    display: inline-block;    max-width: 200px;    width: 29%;    border:1px solid red;    position: relative;    margin: 5px 1%;  }

原标题:css图片响应式+垂直水平居中2

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。