讨论题

作者: cooore | 来源:发表于2016-02-22 20:31 被阅读0次

    /*flex布局*/

    display: flex;

    align-items: flex-end;

    优点:只在父元素上设置即可,代码简洁

    缺点:低版本浏览器不兼容

    /*position方法*/

    position: relative;/*父元素属性*/

    position: absolute;/*子元素属性*/

    bottom: 0;/*子元素底部对齐*/

    再分别对每个子元素设置left属性即可

    优点:兼容低版本浏览器

    缺点:代码量较多,子元素脱离文档流

    /*table-cell方法*/

    display: table-cell;

    vertical-align: bottom;

    font-size:0;/*清除底部和子元素间的空隙*/

    优点:只在父元素上设置,代码简洁;

    缺点:IE8以下不兼容

    (1).slide {

    position: relative;

    width: 500px;

    height: 300px;

    background-color: blue;

    }

    .slide .pointer {

    position: absolute;

    bottom: 10px;

    left:50%;

    transform:translateX(-50%);

    }

    .pointer i {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin-right:5px;

    background-color: black;

    border-radius: 5px;

    }(2)/* 缺点:指示器占位 */

    .slide {

    display:flex;

    flex-flow:column;

    background-color: blue;

    }

    .slide .pointer {

    position: relative;

    bottom:10px;

    align-self: center;

    }

    .pointer i {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin-right:5px;

    background-color: black;

    border-radius: 5px;

    }(3).slide {

    display:table;

    text-align:center;

    background-color: blue;

    }

    .slide .pointer {

    margin-top:-25px;

    height: 20px;

    line-height:20px;

    }

    .pointer i {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin-right:5px;

    background-color: black;

    border-radius: 5px;

    }

    双飞翼布局

    双飞翼布局 

    相关文章

      网友评论

          本文标题:讨论题

          本文链接:https://www.haomeiwen.com/subject/myjbkttx.html