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

Question

我应该使用哪些代码来按照这张图片中列出的方式布置我的网页？

编辑：不幸的是，这不是作业 - 我只是一个网络新手！谢谢！

- Nescio

---

感谢您包含了一个漂亮的图表，而不是试图用文字来解释它哈哈。 - Jesse O'Brien

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的内容较短/等于Panel B时，Panel C不会滑动到Panel A下面？

答：您有两个选择： a）将B和C包装到一个包装器div中：

<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%;
}

- erenon

---

感谢您在我删除后仍然回答我的追问！真希望我可以再次接受这个答案。 :) - Nescio

Answer 2

目前不太清楚您是想要固定宽度还是浮动大小的“面板”，但您可以在此网站上找到使用CSS的广泛HTML布局教程：

http://www.maxdesign.com.au/presentation/page_layouts/

有几种两列布局的变体。

- James McNellis

Answer 3

试一下这个：

:

html, body {
    margin: 0;
    padding: 0;
    height: 100%
}

div {
    border: 1px solid black;
}

#panela {
    float: left;
    width: 25%;
    height: 98vh;
}
#panelb {
    float: right;
    width: 72%;
    height: 49vh;
}
#panelc {
    float:right;
    width: 72%;
    height: 49vh;
}

<div id="panela">PANEL A</div>
<div id="panelb">PANEL B</div>
<div id="panelc">PANEL C</div>

- snir