html - 屏幕分辨率问题

Question

我在对索引页进行编码后遇到了这个问题。我将页面分为两列:

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%;}

非常感谢帮助

Answer 1

当没有足够的空间容纳它们时， float 将换行。您的 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.
}