communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > css图片响应式+垂直水平居中2_html/css_WEB-ITnose

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

WBOY
Libérer： 2016-06-24 11:37:58
original
1147 Les gens l'ont consulté

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

实际上，结合本?的这篇模拟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%;    }
Copier après la connexion

通过设置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;    }
Copier après la connexion

3.添加

  •     .justify_fix{        display:inline-block;         width:100%;         height:0;         overflow:hidden;        border:0;    }
    Copier après la connexion

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

    Étiquettes associées：
    css图片响应式+垂直水平居中2
    source：php.cn
    Article précédent：css 性能调优_html/css_WEB-ITnose Article suivant：Android Animation动画详解（二）： 组合动画特效_html/css_WEB-ITnose
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
    Depuis 2024-04-29 11:01:01
    0
    3
    2253
    Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
    Depuis 2024-04-23 00:22:19
    0
    11
    2392
    La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
    Depuis 2024-04-19 15:37:47
    0
    1
    2005
    Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
    Depuis 2024-04-18 23:52:34
    0
    1
    1892
    Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
    Depuis 2024-04-16 10:10:18
    0
    0
    1957
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal