逆天人物 自适应布局

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%;}
}

Tips:You can change the code before run.

THE END
分享
二维码
打赏
< <上一篇
下一篇>>