讨论题

/*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;

}

双飞翼布局

双飞翼布局