Html 使用 div 标签将页面分成三部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17883830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
divide the page in three parts using div tag
提问by Khushi
I am trying to get the below layout for more than 1.5 hours but still can't get the right solution.
我试图获得以下布局超过 1.5 小时，但仍然无法获得正确的解决方案。
well if there are any duplicates then forgivve me for asking this question.
好吧，如果有任何重复，请原谅我提出这个问题。
I want to have a layout like below diagram using div tag:
我想使用 div 标签有一个如下图所示的布局：
|_________________________________________________________________________________| | | | | | | | | | | | | |__________________________________________________________| | | | | | | | | | | | | | | | | | | | | | | | |__________________________________________________________________________________
| ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ __ ___| | | | | | | | | | | | | | __ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ____| | | | | | | | | | | | | | | | | | | | | | | | | | | | |__ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ __
I know how to do it using table tag.
我知道如何使用表格标签来做到这一点。
回答by Arda
float:leftis your friend
float:left是你的朋友
HTML:
HTML：
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
The CSS:
CSS：
div {
display: block;
}
#wrapper {
width: 400px;
height:400px;
}
#first {
float:left;
width: 33%;
height: 100%;
background: red;
}
#second {
float:left;
width: 67%;
height: 30%;
background: green;
}
#third {
float:left;
width: 67%;
height: 70%;
background: blue;
}
Example: http://jsfiddle.net/Vkmq3/1/
回答by Naveen Kumar Alonekar
Here is exact JSFiddleor JSBin
Make CSSas
将CSS设为
#upleft {
width:100px;
height: 300px;
background:red; float:left;
}
#upright {
width:300px;
height:200px;
background:blue;
float:left
}
#below {
height:300px;
width:400px;
background:green
}
And in HTML
在HTML 中
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
回答by CoursesWeb
Try this css and html code:
试试这个 css 和 html 代码：
CSS:
CSS：
<style type="text/css">
#left {
float:left;
width:27%;
height: 25em;
margin:1px .2em 1px 1px;
border: 2px solid green;
}
#content {
margin:1px .2em 1px 28%;
}
#cnt1 {
position;relative;
margin:.3em 2px;
height: 10em;
border: 1px solid blue;
}
#cnt2 {
position;relative;
margin:.3em 2px;
height: 100%;
}
</style>
HTML:
HTML：
<div id="left">Left side</div>
<div id="content">
<div id="cnt1">Up</div>
<div id="cnt2">Down</div>
</div>
<br style="clear:both;" />
