为了账号安全,请及时绑定邮箱和手机立即绑定

解释一下该例子的原理

当width>480px的时候,就是一个绿色的div里面包含一个橙色的div和一个蓝色的div,因为左边的div设置的宽度是20%,右边的div是%78,还剩下100-20-78=2,即2%,所以中间会出现一小段绿色的背景,是因为父div的背景色还没完全覆盖掉;

当width<=480px的时候,@media (max-width: 480px) {....}这段样式代码就生效了,float:none;

width:100%; 把float去除了,宽度设置%100,所以橙色div和绿色div就分2行显示了,这时候,父div的绿色背景色就被全部覆盖掉了;

正在回答

7 回答

楼主威武

0 回复 有任何疑惑可以回复我~

楼主解释的真棒

0 回复 有任何疑惑可以回复我~

感谢楼主的解释

0 回复 有任何疑惑可以回复我~

差不多

0 回复 有任何疑惑可以回复我~

这样一看明白了

0 回复 有任何疑惑可以回复我~

解释得很好

0 回复 有任何疑惑可以回复我~

顶一下楼主。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

解释一下该例子的原理

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信