理解:
拔河效应依我理解就是相当于一个物体受到在相反方向两个大小相同的力,再加上设置margin:auto;就相当于物体受到两个拉力很难受(╯﹏╰），只有当它老老实实呆着任两个力的摆布时，它才好受些QAQ,也就是自适应居中
上代码:
HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>拔河效应</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div class="container"> 10 <ul> 11 <li class="active"><img src="01.jpg"></li> 12 <li class="left"><img src="02.jpg"></li> 13 <li class="right"><img src="03.jpg"></li> 14 </ul> 15 </div> 16 </body> 17 </html>
CSS
1 * { 2 padding: 0; 3 margin: 0; 4 border: 0; 5 } 6 7 .container { 8 background-color: #eaeaea; 9 position: relative;/*相对定位*/ 10 } 11 .container>ul { 12 width: 1500px; 13 height: 700px; 14 position: relative; 15 margin: 0 auto; 16 } 17 .container>ul>li { 18 width: 600px; 19 height: 400px; 20 /*隐藏超出范围的内容*/ 21 overflow: hidden; 22 position: absolute;/*绝对定位(相对于第一个具有relative或absolute的父元素)*/ 23 } 24 .container>ul>li.active { 25 /*设置该的层叠位置*/ 26 z-index: 2; 27 /*相对于两个力*/ 28 top: 0px; 29 bottom: 0px; 30 right: 0; 31 left: 0; 32 /*自适应*/ 33 margin: auto; 34 height: 600px; 35 } 36 .container>ul>li.left { 37 z-index: 1; 38 top: 0; 39 bottom: 0; 40 left: 50px; 41 margin: auto; 42 } 43 .container>ul>li.right { 44 z-index: 1; 45 top: 0; 46 bottom: 0; 47 right: 50px; 48 margin: auto; 49 } 50 51 .container>ul>li>img { 52 position: absolute; 53 /*图片内容向左偏移20%*/ 54 left: -20%; 55 /*相对于父带元素的高度*/ 56 height: 100%; 57 }
