下面是带有左右附加图像的菜单行的代码。我需要这样的行为:当屏幕宽度的分辨率从 960px 到 1398px 时——左右 div 同时隐藏。这段代码完全符合我的要求!问题是,在低屏幕宽度(960px 到 1398px)上,它会向浏览器添加水平滚动条:(但根据我的想法,垂直滚动只需要屏幕宽度小于 960px。有什么建议如何解决这个问题吗?谢谢。
html:
<div class="bxt">
<div class="boxone"></div>
<div class="center"></div>
<div class="boxtwo"></div>
</div>
css:
.bxt{
width:960px;
height:72px;
margin:0 auto;
position:relative;
/*background-color:#000 */
}
.bxt div{
position:absolute;
width:219px;
/* background:#CCCCCC; */
top:0;
height:72px;
margin:0 0 0 0;
}
.bxt div.boxone{
left:-219px;
margin:0 0 0 0;
background-image:url(images/i_02.jpg)
}
.bxt div.boxtwo{
right:-219px;
margin:0 0 0 0;
background-image:url(images/i_04.jpg)
}
.bxt div.center{
width:960px;
height:72px;
right:0;
/* background:#AAAAAA; */
background-image:url(images/i_03.jpg);
}
你可以使用媒体查询 http://caniuse.com/css-mediaqueries:
body{
overflow-y:hidden;
}
@media only screen and (max-width:960px){
body{
overflow-y:scroll;
}
}
当浏览器窗口小于时,将隐藏滚动条960px
宽度。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)