What code should I use to layout my webpage as listed in this pic?
在这张图片中，我应该用什么代码来布局我的网页?
Layout http://i33.tinypic.com/246vs5j.jpg
布局http://i33.tinypic.com/246vs5j.jpg
Edit: Unfortunately, this is not homework - I am just a web newb!! Thanks!
编辑:不幸的是，这不是家庭作业——我只是一个网络新闻!谢谢!
3 个解决方案
#1
8
Are the height/weight of the boxes fixed or fluid? Has panel A any background? The easiest way:
箱子的高度/重量是固定的还是流动的?面板A有背景吗?最简单的方法:
HTML
HTML
<div id="container">
<div id="side"> panel A</div>
<div id="head"> panel B</div>
<div id="content"> panel C</div>
</div>
CSS
CSS
#container{
width: 100%;
}
#side{
width: 20%;
float: left;
}
#head{
width: 80%;
float: left;
}
#content{
width: 80%;
float: left;
}
If you have background to panel A, you should set it to the container, and inherit it from.
如果您有panel A的背景，您应该将其设置为容器，并从它继承。
Edit:
Q: How do I ensure that panel C doesn't slide under panel A when A's content is shorter/equal to Panel B?
A: You have two option:
a) Wrap B and C to a wrapper div:
问:当A的内容较短/等于B时，我如何确保C面板不滑到A面板下?A:你有两种选择:A)包装B和C包装div:
HTML
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) Play with padding; set 20% padding to the container, and -20% margin to the side:
b)玩填充;在容器上设置20%的填充，在侧面设置-20%的边缘:
CSS
CSS
#container{
width: 80%;
padding: 0 0 0 20%;
}
#side{
width: 20%;
float: left;
margin: 0 0 0 -20%;
}
#2
2
It's not quite clear whether you want fixed-width or floating-size "panels," but you can find tutorials for a wide range of HTML layouts using CSS at this website:
不清楚你想要固定宽度还是浮动尺寸的“面板”，但是你可以在这个网站上找到关于各种HTML布局的教程。
http://www.maxdesign.com.au/presentation/page_layouts/
http://www.maxdesign.com.au/presentation/page_layouts/
There are several varieties of two-column layouts.
有几种两栏布局。
#3
0
try this:
试试这个:
:
:
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>#1
8
Are the height/weight of the boxes fixed or fluid? Has panel A any background? The easiest way:
箱子的高度/重量是固定的还是流动的?面板A有背景吗?最简单的方法:
HTML
HTML
<div id="container">
<div id="side"> panel A</div>
<div id="head"> panel B</div>
<div id="content"> panel C</div>
</div>
CSS
CSS
#container{
width: 100%;
}
#side{
width: 20%;
float: left;
}
#head{
width: 80%;
float: left;
}
#content{
width: 80%;
float: left;
}
If you have background to panel A, you should set it to the container, and inherit it from.
如果您有panel A的背景，您应该将其设置为容器，并从它继承。
Edit:
Q: How do I ensure that panel C doesn't slide under panel A when A's content is shorter/equal to Panel B?
A: You have two option:
a) Wrap B and C to a wrapper div:
问:当A的内容较短/等于B时，我如何确保C面板不滑到A面板下?A:你有两种选择:A)包装B和C包装div:
HTML
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) Play with padding; set 20% padding to the container, and -20% margin to the side:
b)玩填充;在容器上设置20%的填充，在侧面设置-20%的边缘:
CSS
CSS
#container{
width: 80%;
padding: 0 0 0 20%;
}
#side{
width: 20%;
float: left;
margin: 0 0 0 -20%;
}
#2
2
It's not quite clear whether you want fixed-width or floating-size "panels," but you can find tutorials for a wide range of HTML layouts using CSS at this website:
不清楚你想要固定宽度还是浮动尺寸的“面板”，但是你可以在这个网站上找到关于各种HTML布局的教程。
http://www.maxdesign.com.au/presentation/page_layouts/
http://www.maxdesign.com.au/presentation/page_layouts/
There are several varieties of two-column layouts.
有几种两栏布局。
#3
0
try this:
试试这个:
:
:
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>