屏幕分辨率问题

编码我的索引页后出现此问题。我划分了页面分成两列：屏幕分辨率问题

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

来源

2011-09-08 Vaz

当它们不存在足够的空间时，浮动将会环绕。你的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. 
}

来源

2011-09-08 18:40:37 Wayne

谢谢男人！这得到了我只想要的效果，现在contentleft被放置在一个带有水平滚动条的框架中......这发生在小分辨率屏幕上。感谢大家的帮助！ – Vaz

不要忘记文件默认的css保证金！如果你不打包分隔默认的边缘是8个像素的屏幕分裂100％宽度分割... * {padding：0px; margin：0px} ...我似乎总是在第一次编码时错过这个。 – Wayne

感谢您的回复，但这已经是mt css文档:) – Vaz

添加width到您的div并把它放在％像50％-50％。

来源

2011-09-08 18:33:04 kaps

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！

来源

2011-09-08 18:35:25

感谢您的快速回答！我会检查它是否有效，并让你知道;） – Vaz

屏幕分辨率问题

回答

相关问题