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 }
  • 相关阅读:
    有序表的合并---顺序表实现
    有序表的合并---链表实现
    双向链表操作
    有序表的合并-用链表操作
    C语言单链表操作
    c语言顺序表操作
    c语言 取余 % 和除法 / 的应用技巧 (在取位数方面的)
    JS打印表格(HTML定义格式)
    富文本编辑器(php)
    利用formdata异步上传图片并预览图片
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5850371.html
Copyright © 2011-2022 走看看