使用css3媒体查询实现列自适应

审核中 分享 未结
0 70
ieJSON
ieJSON 2019-03-20 09:57:17
悬赏:0飞吻
HTML代码 [pre] <div class="container"> <div class="box"> left </div> <div class="box"> right </div> </div> [/pre] [hr] CSS代码 [pre] .container{ width:100%; } .box { float:left; box-sizing: border-box; width:50%; height:100px; border:1px solid #ccc; text-align:center; } @media screen and (max-width:640px){ .box{ width:100%; } .box.box{ margin-bottom:5px; } } [/pre] [hr] 屏幕大于640px的效果 img[../../upload/TIM截图20190320095618.png] 屏幕小于640px的效果 img[../../upload/TIM截图20190320095635.png]
回帖
  • 消灭零回复
热议榜单
我是QQ新户 2
1024程序员节 - Happy 1024. 1
ieJSON

微信扫码关注 ieJSON 公众号