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

帮助将是很好的appriciated

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/

Fyi ...我也将它们向左移动并更改了margin并添加了一些颜色以便于查看。

欢迎来到SO！

Answer 3

将width添加到您的Div，并将其放入％，如50％-50％。

屏幕分辨率问题

3 个答案: