今天写网页缩小浏览器时,发现一个很恶心的问题。绝对定位模块左边缺失,导航条和下方相对定位模块的右边成了“白带”。
 左边
左边
 右边
右边
有问题咱就解决呗,于是我开始了漫漫探索道路。
我首先想到的是浮动问题。顶部盒子中有左浮动和右浮动,莫非导航栏的ul需要浮动一下,而下面的大盒子中再嵌套一个同样大的盒子浮动一下?已有知识点给我的感觉应该不行,但是,实践才是检验真理的唯一标准,好吧还是不行,那就继续下一个想法。
然后我想到的是宽度问题。所有的外部盒子我都没有设置宽度,按理来说是可以的。然后我就把外部大盒子宽度设置成width = 100%。同样,还是没有效果。
解决方案:
最后想不出来就只能寻求万能的百度了:
浏览器窗口缩小,div宽度就会自适应,其中原因我不太理解。
而给body设置一个min-width,并且大于所有居中div的width,就会使得缩小后的浏览器中,网页以最小宽度显示。浏览器窗口拉大到大于min-width时,左右两边内容均等出现。
 居中盒子
居中盒子
 body设置
body设置
 左边内容
左边内容
 右边内容
右边内容
 浏览器窗口大于min-width时的内容
浏览器窗口大于min-width时的内容












网友评论