zoukankan      html  css  js  c++  java
  • CSS flex让所有灵活的项目都带有相同的长度,忽略它们的内容:

    .flexbox {
        display
    : -webkit-box;
        display
    : -webkit-flex;
        display
    : -ms-flexbox;
        display
    : flex;
        -webkit-box-pack
    : center;
        -moz-box-pack
    : center;
        -ms-flex-align
    : center;
        -webkit-box-align
    : center;
        -moz-box-align
    : center;
        -webkit-align-items
    : center;
        -moz-align-items
    : center;
        align-items
    : center;
    }
    .flex-1 
    {
        webkit-box-flex
    : 1;
        -webkit-flex
    : 1;
        -ms-flex
    : 1;
        flex
    : 1;
    }

    <ul class="proimg mt10 flexbox">

                        <li class="flex-1">
                            <href="http://m.instrument.com.cn/show/d-C10414.html">
                                <img src="http://img1.17img.cn/17img/images/201510/pic/67863e21-dd1c-4087-b8e0-137883e6e130.jpg!w186x152.jpg">
                                <span class="f10 bgbl white">GC-4000A系列气相色谱仪</span>
                            </a>
                        </li>
                        <li class="flex-1">
                            <href="http://m.instrument.com.cn/show/d-C126972.html">
                                <img src="http://img1.17img.cn/17img/old/showb/pic/C126972.jpg!w186x152.jpg">
                                <span class="f10 bgbl white">高纯气体分析系统GC-9560-PDD</span>
                            </a>
                        </li>
                        <li class="flex-1">
                            <href="http://m.instrument.com.cn/show/d-C149111.html">
                                <img src="http://img1.17img.cn/17img/old/showb/pic/C149111.jpg!w186x152.jpg">
                                <span class="f10 bgbl white">赛默飞TRACE 1300系列 模块化气相色谱仪</span>
                            </a>
                        </li>
                </ul>

    效果如下图: 

    参考网站:

    http://www.runoob.com/cssref/css3-pr-flex.html 

    http://m.liepin.com/ 

    注意:存在兼容性问题,safari不支持。pc端慎用。我是在wap端用的,哈哈! 

  • 相关阅读:
    dell台式机网络唤醒
    今天学习到ROS的PCC的新的一种场景,用PCC不是为了带宽叠加而是为了换IP,PCC的标准做法
    默认ros安装好以后,可能对外开放的端口号,可能被黑客利用的地方,ros的0day漏洞
    ros-winbox利用防火墙安全登录,二次碰撞方法
    S5120V2-IRF2配置
    routeros ros mikrotik的ipsec配置,注意配置的步骤,以及哪些硬件支持哪种加速
    60岁-80岁老年人住院医疗险,既往症可理赔!家有长辈首选
    docker上2分钟安装mikrotik routeros
    pandas filter数据筛选
    (纪录片)光的故事 BBC Light Fantastic (2004)
  • 原文地址:https://www.cnblogs.com/nzcblog/p/4952367.html
Copyright © 2011-2022 走看看