---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

逆天人物 自适应布局

前端开发 蚂蚁 1723℃ 0评论

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

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

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

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情