逆天人物自适应布局

html

<div class="demo">
    <ul>
      <li>
        <div class="inner"></div>
      </li>
      <li>
        <div class="inner"></div>
      </li>
      <li>
        <div class="inner"></div>
      </li>
      <li>
        <div class="inner"></div>
      </li>
    </ul>
  </div>

css

*{padding:0; margin:0;}
ul{list-style-type:none;}
.demo{max-width:600px; margin:0 auto; overflow:hidden; background:#ccc;}
.demo ul{margin:0 -5px;}
.demo li{float:left; width:25%;}
.demo .inner{margin:5px; border:#f60 2px solid; height:200px;}
@media screen and (max-width:640px){
  .demo li{width:50%;}
}
@media screen and (max-width:320px){
  .demo li{width:100%;}
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应布局</title> <style> *{padding:0; margin:0;} ul{list-style-type:none;} .demo{max-width:600px; margin:0 auto; overflow:hidden; background:#ccc;} .demo ul{margin:0 -5px;} .demo li{float:left; width:25%;} .demo .inner{margin:5px; border:#f60 2px solid; height:200px;} @media screen and (max-width:640px){ .demo li{width:50%;} } @media screen and (max-width:320px){ .demo li{width:100%;} } </style> </head> <body> <div class="demo"> <ul> <li> <div class="inner"></div> </li> <li> <div class="inner"></div> </li> <li> <div class="inner"></div> </li> <li> <div class="inner"></div> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 逆天人物自适应布局