<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> *{padding:0; margin:0;} ul{list-style-type:none;} #box{overflow:hidden;} #box ul{position:relative; overflow:hidden; padding-bottom:48%; margin:-2px;} #box li{position:absolute; top:0;} #box .inner{position:absolute; top:0; right:0; bottom:0; left:0; background:#ddd; margin:2px;} #box li:nth-child(1){width:32%; padding-bottom:48%;} #box li:nth-child(2){left:32%; width:16%; padding-bottom:16%;} #box li:nth-child(3){left:32%; margin-top:16%; width:16%; padding-bottom:16%;} #box li:nth-child(4){left:32%; margin-top:32%; width:16%; padding-bottom:16%;} #box li:nth-child(5){left:48%; width:32%; padding-bottom:20%;} #box li:nth-child(6){left:48%; margin-top:20%; width:28%; padding-bottom:28%;} #box li:nth-child(7){left:80%; width:20%; padding-bottom:20%;} #box li:nth-child(8){left:76%; margin-top:20%; width:24%; padding-bottom:28%;} </style> </head> <body> <div id="box"> <ul> <li> <div class="inner">1</div> </li> <li> <div class="inner">2</div> </li> <li> <div class="inner">3</div> </li> <li> <div class="inner">4</div> </li> <li> <div class="inner">5</div> </li> <li> <div class="inner">6</div> </li> <li> <div class="inner">7</div> </li> <li> <div class="inner">8</div> </li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> *{padding:0; margin:0;} ul{list-style-type:none;} #box{overflow:hidden;} #box ul{overflow:hidden; margin:-2px;} #box li{position:relative; float:left; width:16%; padding-bottom:16%;} #box .inner{position:absolute; top:0; right:0; bottom:0; left:0; margin:2px; background:#ddd;} #box li:nth-child(1){width:32%; padding-bottom:48%;} #box li:nth-child(3){clear:both; margin-left:32%; margin-top:-32%;} #box li:nth-child(4){clear:both; margin-left:32%; margin-top:-16%;} #box li:nth-child(5){clear:both; width:32%; padding-bottom:20%; margin-left:48%; margin-top:-48%;} #box li:nth-child(6){clear:both; width:28%; padding-bottom:28%; margin-left:48%; margin-top:-28%;} #box li:nth-child(7){clear:both; width:20%; padding-bottom:20%; margin-left:80%; margin-top:-48%;} #box li:nth-child(8){clear:both; width:24%; padding-bottom:28%; margin-left:76%; margin-top:-28%;} </style> </head> <body> <div id="box"> <ul> <li> <div class="inner">1</div> </li> <li> <div class="inner">2</div> </li> <li> <div class="inner">3</div> </li> <li> <div class="inner">4</div> </li> <li> <div class="inner">5</div> </li> <li> <div class="inner">6</div> </li> <li> <div class="inner">7</div> </li> <li> <div class="inner">8</div> </li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 来自逆天人物的负边距 喜欢 (0)or分享 (0)
