html - 如何在我的网页上编写此面板布局的代码？

Question

我应该使用什么代码来布局我的网页，如此图所示？

编辑:不幸的是，这不是家庭作业——我只是一个网络新手!!谢谢!

Answer 1

盒子的高度/重量是固定的还是可变的？面板 A 有任何背景吗？最简单的方法:

HTML

<div id="container">
    <div id="side"> panel A</div>
    <div id="head"> panel B</div>
    <div id="content"> panel C</div>
</div>

CSS

#container{
    width: 100%;
}
#side{
    width: 20%;
    float: left;
}
#head{
    width: 80%;
    float: left;
}
#content{
    width: 80%;
    float: left;
}

如果你有面板A的背景，你应该将它设置到容器中，并从中继承它。

编辑:

问:当 A 的内容短于/等于面板 B 时，如何确保面板 C 不会滑到面板 A 下方？
A: 你有两个选择:
a) 将 B 和 C 包装到包装器 div 中:

HTML

<div id="container">
    <div id="side"> panel A</div>
    <div class="wrapper">
        <div id="head"> panel B</div>
        <div id="content"> panel C</div>
    </div>
</div>

b) 玩填充；为容器设置 20% 的内边距，为侧面设置 -20% 的边距:

CSS

#container{
    width: 80%;
    padding: 0 0 0 20%;
}
#side{
    width: 20%;
    float: left;
    margin: 0 0 0 -20%;
}