在html和CSS中创建4个div和一个左菜单div

我没有找到什么好东西可以帮助我，所以我要问一个问题，对不起，如果已经有任何答案了

我想要一个HTML页眉，一个标题，左边的div，一个菜单，中间（通常有1个内容div）- 4个div，用于4个图表，我希望它们对齐：

menu div | 1 2 | 3 4 菜单分区| 1 2 | 3 4 我不能用float left这样做，因为数字3不在菜单上，而是在页面的左侧

---

有什么想法吗？（除了使所有内容都超级固定之外，这是我不喜欢的解决方案）

您的问题的细节有点模糊，但是

第3项的
左边的
边距等于您的菜单div的宽度可能会使您的浮动策略起作用

如果你发布了你的实际代码，你的问题将提供更多有用的回答。
如果你不想修复任何东西，那么这可能就是解决方法：

<div> <!-- upper content -->
 <div style="float:left">1</div>
 <div style="float:left">2</div>
</div>
<div> <!-- lower content -->
 <div style="float:left">3</div>
 <div style="float:left">4</div>
</div>


1.
2.
3.
4.
HTML

看这个

注意根据您的内容，您可能希望让4个div的高度相等

#d1, #d2, #d3, #d4 {
    width: 50%;
    height: ...
}

答案的变化。

块将自动补偿不同的高度


加价

<div id="menu">Menu</div>
<div id="content">
    <div class="content-block">
        first block<br />
        second line<br />
        third line<br />
    </div>
    <div class="content-block">
        second block
    </div>
    <div class="content-block">
        third block
    </div>
    <div class="content-block">
        fourth block
    </div>
</div>

this.question+code=答案++；美好的我仍然在给@melhosseiny绿色V，但非常感谢
#d1, #d2, #d3, #d4 {
    width: 50%;
    height: ...
}

<div id="menu">Menu</div>
<div id="content">
    <div class="content-block">
        first block<br />
        second line<br />
        third line<br />
    </div>
    <div class="content-block">
        second block
    </div>
    <div class="content-block">
        third block
    </div>
    <div class="content-block">
        fourth block
    </div>
</div>

#menu {
    float: left;
    width: 200px;
    background: #ccc;
}
#content {
    margin-left: 200px;
    /* for the benefit of ie6 double margin bug */
    zoom: 1;
}

.content-block {
    background: #efefef;
    float: left;
    width: 50%
}

/* every second block clears starting at block 3 */
.content-block:nth-child(2n+3) {
    clear: left;
}