屏幕分辨率问题
编码我的索引页后出现此问题。我划分了页面分成两列:屏幕分辨率问题
header
nav
content floating left, content floating right
footer
在我的屏幕分辨率我有它正确对齐:
Content left | Content right
但是在小屏幕上,它看起来像这样:
Content left
Content right
这是代码:
<div id="contentleft">
text & content left
</div>
<div id="contentright">
text & content right
</div>
CSS:
#contentleft {
float:left;
margin-left:12%;}
#contentright {
float:right;
margin-right:12%;}
帮助将是巨大的appriciated
当它们不存在足够的空间时,浮动将会环绕。你的CSS的宽度设置为自动扩展到内容。
#contentleft {
float:left;
margin-left:12%;
width:38%; // note margins grow the width of divides
}
#contentright {
float:right;
margin-right:12%;
width:37%; // note on odd width screen some browsers IE rounds up so 100%/2 + 100%/2 = 101% according to microsoft.
}
添加width
到您的div并把它放在%像50%-50%。
50%+ 12%+ 50%+ 12%> 100%,不要忘记那些利润率。 –
防止重叠的一种方法是将div
s都放入#wrapper div
中,并给#wrapper
设置一组width
。
#wrapper{
width:400px;
}
#contentleft {
float:left;
width:120px;
margin-left:12%;
background:green;
}
#contentright {
float:left;
width:120px;
margin-left:12%;
background:red;
}
例子:http://jsfiddle.net/jasongennaro/b2eyx/1/
据透露...我也飘来他们左,改变了margin
S和添加了一些颜色,使其更容易看到。
欢迎来到SO!
感谢您的快速回答!我会检查它是否有效,并让你知道;) – Vaz
谢谢男人!这得到了我只想要的效果,现在contentleft被放置在一个带有水平滚动条的框架中......这发生在小分辨率屏幕上。 感谢大家的帮助! – Vaz
不要忘记文件默认的css保证金!如果你不打包分隔默认的边缘是8个像素的屏幕分裂100%宽度分割... * {padding:0px; margin:0px} ...我似乎总是在第一次编码时错过这个。 – Wayne
感谢您的回复,但这已经是mt css文档:) – Vaz