zoukankan      html  css  js  c++  java
  • flexBox布局 -- 兼容性

     1 //中间留空,两侧靠边,多行显示,每行3个,一个li的宽度是30%,最后一行,如果是两个的时候会出现异常布局,可以对最后一行的最后一个li进行right:35%,android4.4以上才支持,
    所以说还需要通过混合box布局,但,如果需要多行显示,则android中不能实现,lines属性不支持,但在android4.2版本中,如果使用微信或者浏览器也还是可以的
    2 .title ul{ 3 list-style-type: none; 4 position: relative; 5 overflow: hidden; 6 height: 48px//中间留空,两侧靠边 7 display : -webkit-flex; 8 -webkit-flex-direction : -webkit-row; 9 -webkit-flex-wrap : wrap; 10 -webkit-justify-content : space-between; 11 -webkit-align-item : -webkit-stretch; 12 display : -moz-flex; 13 -moz-flex-direction : -moz-row; 14 -moz-flex-wrap : wrap; 15 -moz-justify-content : space-between; 16 -moz-align-item : -moz-stretch; 17 display : -ms-flex; 18 -ms-flex-direction : -ms-row; 19 -ms-flex-wrap : wrap; 20 -ms-justify-content : space-between; 21 -ms-align-item : -ms-stretch; 22 display : -o-flex; 23 -o-flex-direction : -o-row; 24 -o-flex-wrap : wrap; 25 -o-justify-content : space-between; 26 -o-align-item : -o-stretch; 27 display : flex; 28 flex-direction : row; 29 flex-wrap : wrap; 30 justify-content : space-between; 31 align-item : stretch;; 32 margin: 8px 0 0px 0; 33 }

    //可以使用另一种方式进行布局,3列多行布局
     1 .am-smallContainer ul li{
     2      30%;
     3     text-align: center;
     4     border: 1px solid #ccc;
     5     height: 80px;
     6     margin: 8px 0;
     7     position: relative;
     8     border-radius: 2px;
     9     float: left;
    10     margin-right: 4.5%;
    11 }
    12 .am-smallContainer ul li:nth-child(3n){
    13     margin-right: 0;
    14 }
    15 .am-smallContainer ul li:first-child{
    16     margin-right: 4.5%;
    17 }
  • 相关阅读:
    用Docker执行Percona Server
    Java基础 笔记(七)
    VC与JavaScript交互(三) ———— JS调用C++
    4456: [Zjoi2016]旅行者|分治+最短路
    Swift语法学习之 方法
    JavaScript学习笔记二
    Latex 制作积分规则表格
    向MapReduce转换:计算共现关系
    王立平--switch case
    组队训练1 回放
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5850371.html
Copyright © 2011-2022 走看看