Question

我的网站包含一个侧边菜单div和一个主要内容div。我已经将div留下并使用了百分比，以便列填满整个页面。然而，我也使用最小宽度，因为我希望侧面菜单不小于205px宽，主要内容不小于780px。该网站需要不小于985px宽，但我仍然希望内容足够灵活，以填满屏幕。

我的问题是当我调整窗口大小（宽度小于985px）时，主内容div在侧面菜单下方移动。我哪里出错了？，div应该保持在侧边菜单旁边的相同位置，但水平滚动条应该开始。内容应该填满屏幕。

Fiddle

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>

<div id="wrapper">

    <div id="side-bar">
        <p>side bar</p>
    </div>

    <div id="main-content">

        <div id="content">
            <p>some content</p>
        </div>    

    </div>

</div>


</body>
</html>

CSS：

body 
{
margin:0;
padding:0;
font-size:100%;
font-family:Arial;
}

p 
{
margin:0;
padding:0;
}

#wrapper 
{
width:100%;
min-width:985px; /*site no smaller than 985px wide*/
height:auto;
}

#side-bar 
{
width:15%;
min-width:205px; /*nav sidebar no smaller than 205px wide*/
min-height:672px;
background-color:Gray;
float:left;
}

#main-content
{
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}

#content 
{
width:740px;
height:500px;
background-color:#ccc;
margin:0 auto;
}

Answer 1

有人发布了答案，但由于某种原因，它现在已经消失，所以我不能因为解决这个问题而受到赞誉。

我创建了一个最小宽度为985px的包装器。然后，我使用了百分比值，侧面和主要内容div为15％＆amp;分别为85％。但是我没有考虑到它的985px包装的15％和85％。

我的侧栏宽15％，最小宽度为205px，但985px的15％仅为147.25px，因此额外的像素迫使主要内容div低于侧栏。

希望有道理吗？谢谢你帮助我:)）

Answer 2

主要内容div低于菜单div的原因是盒子模型的工作方式。如果您将主内容div更改为内联块，它将保留在menue的右侧。这是一个jsfiddle，向您展示如何做到这一点。

#main-content
{
   display:inline-block
   width:85%;
   min-width:780px;
   min-height:672px;
   background-color:Maroon;
   float:left;
}

Answer 3

如果有足够的水平空间，浮动到同一侧的块只会彼此相邻。

如果我真的想要一个水平滚动条，我会尝试使用表格布局（显示：table-row，display：table-cell）。

Answer 4

在main-content div之后创建一个div并给它一个'clearfix'类和以下样式：

    .clearfix{
        clear:both;
    }

我认为问题可能是你没有清除浮动，这就是容器div（包装器）搞乱的原因。

浮动div继续滑动到其他浮动div下方

4 个答案: