Javascript 如何使用css扩展div

我试图用css和html做一个简单的布局，布局由左侧的菜单和右侧的一些框组成，想法是左侧永远是一个菜单。我怎样才能修复内容永远不会出现在菜单下的问题？或者我如何查看菜单

小提琴演示

CSS

HTML

菜单

从你的小提琴看，我相信问题是为什么我的div在菜单下

这是因为您有两个

div4

我修改了你的小提琴演示，解决了这个问题

<div id="div4">

</div>

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

</div> -And this!

-把这个拿走！
-还有这个！

---

有两个

div4

会导致总宽度超过包装宽度，从而使

float:left

属性将

div

移动到菜单下。

您只需将div包装在另一个div中，并将边距向左移动210px，这样就不会出现在菜单下

#contentRight{
  margin-left:210px;

}

菜单

请参见此处的工作示例：

---

此外，ID应该对应于DOM中的单个元素。您应该将第二个div4更改为div5，或者创建那些div的类。（例如class=“div4”）。我打赌您只是添加了额外的div4来显示框是如何溢出的，但尽管如此，始终确保标记有效还是很好的

只需在内容周围添加一个包装，并设置适当的宽度，使其与父包装匹配即可

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

菜单
...

参见小提琴：

---

有两种简单的方法可以做到这一点。或者在包装中添加一些填充，可能向左20%，或者菜单的宽度是多少，然后绝对将菜单定位到左侧

或

您可以在包装器内为内容创建父容器，并浮动菜单（第一个）和新容器以相应地填充包装器。如果使用float方法，则必须在内容后面的某处添加一个clear，以防止包装器崩溃，或者也可以将其浮动

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

---

完整示例@

您所说的“内容永远不会进入菜单”是什么意思？如果您看到我的演示，则“内容”的最后一个黑匣子位于“菜单”下。谢谢，这是我一直在寻找的内容。欢迎您。如果有机会，请继续并将此问题标记为已回答。

<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>

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

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