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

Question

我应该用什么代码来布局我的网页？

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