方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#header, #footer{
background-color: red;
height: 30px;
}
#footer{
clear:both;
}
#aside{
background-color: pink;
float: left;
width: 200px;
}
#main{
background-color: grey;
overflow: auto;
}
#bside{
background-color: pink;
float:right;
width: 200px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="middle">
<div id="aside">
aside aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside aside
</div>
<div id="bside">
bside bside bside bside bside bside bside bside bside
bside bside bside bside bside bside bside bside bside
bside bside bside bside bside bside bside bside bside
bside bside bside bside bside bside bside bside bside
</div>
<div id="main">
main main main main main main main main main main main
main main main main main main main main main main main
main main main main main main main main main main main
main main main main main main main main main main main
main main main main main main main main main main main
main main main main main main main main main main main
</div>
</div>
<div id="footer"></div>
</body>
</html>
Paste_Image.png
注意：使用此方法布局html中需要优先左右框，最后main框，否则会产生问题
内容框高我没有设置，需要按照实际情况去设计，否则会高度不一致
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
padding: 0;
margin: 0;
}
#header, #footer{
height: 100px;
background: red;
overflow: hidden;
}
.aside{
float: left;
background-color: pink;
width: 200px;
margin-right: -200px;
}
.center .content{
background-color: grey;
margin-left: 200px;
}
#main .center{
float: right;
width: 100%;
}
#main{
overflow: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div class="center">
<div class="content">
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
我是主区块 我是主区块 main main main
</div>
</div>
<div class="aside">
aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside
aside aside aside aside aside aside aside aside
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Paste_Image.png
三栏布局是在两栏的基础上完成：
圣杯布局
content设置左右边距，宽度等于side1宽度，side1左浮动，side1负边距设为-100%。
side2左浮动，设置负边距等于自身宽度值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.ct{
border: 1px solid;
padding: 0 100px;
}
.ct:after{
content: '';
display: block;
clear: both;
}
.main{
width: 100%;
height: 200px;
background: red;
float: left;
}
.aside{
position: relative;
left: -100px;
width: 100px;
height: 100px;
background: blue;
float: left;
opacity: 0.8;
margin-left: -100%;
}
.extra{
position:relative;
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-left: -100px;
left: 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="main"></div>
<div class="aside">side1</div>
<div class="extra">side2</div>
</div>
</body>
</html>
Paste_Image.png
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.ct{
border: 1px solid;
}
.ct:after{
content: '';
display: block;
clear: both;
}
.main{
width: 100%;
height: 200px;
float: left;
}
.main .wrap{
height: 200px;
background: pink;
margin-left: 110px;
margin-right: 110px;
}
.aside{
width: 100px;
height: 100px;
background: blue;
float: left;
opacity: 0.8;
margin-left: -100%;
}
.extra{
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">
<div class="wrap">ffffff</div>
</div>
<div class="aside">side1</div>
<div class="extra">side2</div>
</div>
</body>
</html>
Paste_Image.png
网友评论