Question

我应该使用哪些代码来布局我在此图片中列出的网页？

Layout http://i33.tinypic.com/246vs5j.jpg

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

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

Answer 2

您是否需要固定宽度或浮动大小的“面板”并不十分清楚，但您可以在此网站上使用CSS找到各种HTML布局的教程：

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

有两种不同的两列布局。

Answer 3

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在我的网页上编码此布局？

3 个答案:

编辑：