当对平板电脑和手机的屏幕分辨率使用媒体查询时,包含所有链接和右侧社交媒体按钮的“sideNav”确实保持 float ,但包含所有内容的“maincontent”部分下降并且不会熬夜漂浮在“sideNav”上。我不明白为什么? “sideNav”通常 float 在“maincontent”的右侧,但在调整大小时不会 float 。
小型桌面显示器的代码:
@media (max-width:1100px) and (min-width:767px){
body{
width:90%;
margin:auto;
}
#body, #wrap{
width:100%;
margin:auto;
}
#maincontent{
font-size:100%;
width:auto;
margin:auto;
border:1px solid black;
}
#header{
font-size:100%;
display:inline-block;
}
#google_translate_element{
display:inline-block;
}
#search{
}
#breadCrumb{
height:1em;
padding-top:1%;
font-size:95%;
}
#navbox{
height:2em;
margin-bottom:1%;
margin-top:2%;
width:100%;
}
#navbox li{
margin:none;
font-size:95%;
}
#sideNav{
width:30%;
padding:0;
border:1px solid black;
}
}
有问题的页面:http://analyzedstock.com/testing/basics-of-stock-market.html
CSS : http://analyzedstock.com/testing/main.css
请调整浏览器大小
最佳答案
规则引起的问题:#header { width: 100%; }
请尝试删除或调整它以使网站在较小的屏幕上正常工作。
关于CSS Float 使内容在较小的屏幕上下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26194293/