Question

我试图用css和html做一个简单的布局，布局包括左边的菜单和右边的一些框，想法是左边总是一个菜单。如何修复内容永远不会出现在菜单下？或者我如何开始菜单

CSS

#wrapper
{
    margin:0 auto;
    width:960px;
    height:auto;
}
#leftNav
{
    height:500px;
    width:200px;
    background:#F00;
    float:left;
    margin-right:10px;
}

#div1
{
    height:200px;
    width:250px;
    float:left;
    background:#000;
    margin-right:10px;
}

#div2
{
    height:300px;
    width:400px;
    background:#00C;
    float:left;
    margin-right:10px;
}

#div3
{
    height:200px;
    width:250px;
    float:left;
    background:#00C;
    margin-right:10px;
}

#div4
{
    height:200px;
    width:400px;
    float:left;
    background:#000;
    margin-right:10px;
}

HTML

<div id="wrapper">


    <div id="leftNav">
     <h2>Menu</h2>
    </div>
    <div id="div1">

    </div>
    <div id="div2">

    </div>

    <div id="div3">

    </div>

     <div id="div4">

    </div>

   <div id="div4">

    </div>

</div>

Answer 1

从你的FIDDLE看，我相信问题是为什么我的div在菜单下？

这是因为你有两个div4。

我修改了您修复问题的FIDDLE演示。

<div id="div4">

</div>

<div id="div4"> -Remove this!

</div> -And this!

有两个div4导致总宽度超出您的包装宽度，float:left属性会将div移到您的菜单下。

Answer 2

你可以将div包装在另一个div中，并将边距210px保留为左边，这样就不会出现在菜单下面。

#contentRight{
  margin-left:210px;

}

<div id="wrapper">


<div id="leftNav">
     <h2>Menu</h2>
</div>
<div id="contentRight">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div class="div4"></div>
    <div class="div4"></div>
</div>

请在此处查看工作示例：http://jsfiddle.net/mtruty/HQ6WJ/3/

此外，ID应该对应于DOM中的单个元素。您应该将第二个div4更改为div5，或者创建div的类。（例如，class =＆＃34; div4＆＃34;）。我打赌你只是添加了额外的div4来显示盒子是如何溢出的，但是，总是确保你的标记有效是件好事。

Answer 3

只需在内容周围添加一个包装器，并设置适当的宽度，使它们与父包装器匹配。

<div id="leftNav">
 <h2>Menu</h2>
</div>
<div id="content_wrapper">
     ...
</div>

见小提琴： http://jsfiddle.net/56JdE/2/

Answer 4

有两种简单的方法可以做到这一点。向包装器添加一些填充，可能是左边20％或者菜单的宽度，然后绝对将该菜单放在左边。

OR

您可以在包装器中为内容创建父容器，并浮动菜单（第一个）和新容器以相应地填充包装器。如果你使用float方法，你必须在内容之后的某处添加一个清除以保持包装器不会折叠，或者也可以浮动它。

.wrapper {
    margin:0 auto;
}
.menu {
    height:500px;
    width:20%;
    float: left;
    background: red;
}
.content {
    width: 80%;
    float: left;
}

完整示例@ http://jsfiddle.net/M58C6/2/

如何用css扩展div

4 个答案: