屏幕分辨率问题

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

当没有足够的空间容纳浮标时，浮标将换行。你的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.
}

Answer 2

防止重叠的一种方法是将两个 div 放置在 #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/< /a>

仅供参考...我还将它们都向左浮动并更改了边距并添加了一些颜色以使其更易于查看。

欢迎来到 SO！

Answer 3

将 width 添加到您的 Div 中，并将其放入 %（如 50%-50%）中。