html - 在 html 和 CSS 中制作 4 个 div 和一个左侧菜单 div

Question

我没有找到对我有帮助的好东西，所以我要问一个问题，抱歉，如果已经有任何答案在某处

我想要一个带有标题的 html 页面，左边是菜单的 div，中间(通常有 1 个内容 div)- 4 个图表的 4 个 div，我希望它们对齐:

menu div    |  1  2

            |  3  4

我不能用 float left 做到这一点，因为数字 3 不固定在菜单上，而是在页面的左侧...

有什么想法吗？ (除了让一切都 super 固定，这是我不喜欢的解决方案)

Answer 1

HTML

<div id="menu">Menu</div>
<div id="content">
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
    <div id="d4">4</div>
</div>

CSS

#menu {
    float: left;
    width: 20%;
}

#content {
    float: right;
    width: 80%;
}

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

#d1, #d3 {
    float: left;  
}

#d2, #d4 {
    float: right;
}

查看此 fiddle .

注意您可能希望根据您的内容为 4 个 div 设置相同的高度。

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