css图片响应式+垂直水平居中2_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:37:58
Original
1118 Leute haben es durchsucht

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

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

看看效果

实现

1.给包裹图片的li

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

通过设置width调整窗口不宽情况下的列数。比如width:22%会使得列数变为4.另外,不要把列数设为2,因为这时两列间有大片空白,这是text-align:justify模拟的缺陷。

2.对图片组的父元素ul class='justify'

    @media (-webkit-min-device-pixel-ratio:0) {    .justify:after {            content: "";            display: inline-block;            width: 100%;        }    }    .justify {        text-align: justify;        text-justify: inter-ideograph;        *zoom: 1;         -moz-text-align-last: justify;        -webkit-text-align-last: justify;        text-align-last: justify;    }
Nach dem Login kopieren

3.添加

  •     .justify_fix{        display:inline-block;         width:100%;         height:0;         overflow:hidden;        border:0;    }
    Nach dem Login kopieren

    完成!就是这么简单!例子下载

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage