三列布局
- 第一种方式
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<style>
#left,
#center,
#right {
height: 300px;
}
#left {
width: 400px;
background-color: #c9394a;
float: left;
}
#center {
width: 400px;
background-color: green;
float: left;
}
#right {
background-color: #cccccc;
margin-left: 800px;
}
</style>
- 第二种方式
<style>
#left,
#center,
#right {
height: 300px;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
float: left;
}
#center {
background-color: green;
margin-left: 300px;
margin-right: 300px;
}
#right {
background-color: #cccccc;
float: right;
}
</style>
圣杯布局
<div id="parent">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<style>
#parent {
height: 300px;
margin-left: 300px;
margin-right: 300px;
}
#left,
#center,
#right {
height: 300px;
float: left;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
margin-left: -100%;
position: relative;
left: -300px;
}
#center {
width: 100%;
background-color: green;
}
#right {
background-color: #cccccc;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
双飞翼布局
<div id="parent">
<div id="center">
<div id="inner"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
<style>
#parent {
height: 300px;
}
#left,
#center,
#right {
height: 300px;
float: left;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
margin-left: -100%;
}
#center {
width: 100%;
background-color: green;
}
#right {
background-color: #cccccc;
margin-left: -300px;
}
#inner {
height: 300px;
background-color: hotpink;
margin-left: 300px;
margin-right: 300px;
}
</style>
等分布局
- 第一种方式
<div id="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
<style>
#parent {
width: 100%;
display: table;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
display: table-cell;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>
- 第二种方式
<style>
.col1,
.col2,
.col3,
.col4 {
height: 300px;
width: 25%;
float: left;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>