两列布局:左侧定宽,右侧自适应
方法一:利用float和负外边距
<style>
* {
margin: 0;
padding: 0;
}
.main,.sitebar {
font: bolder 20px/300px;
}
.main {
width: 100%;
float: left;
}
.main .content {
margin-left: 200px;
background-color: red;
}
.sitebar {
width: 200px;
float: left;
background-color: green;
margin-left: -100%;
}
</style>
<div class="main">
<div class="content">
右侧主体自适应区块
</div>
</div>
<div class="sitebar">
左侧定宽200px区块
</div>
- 优点:考虑了页面优化,右侧主内容区先加载,左侧后加载。
- 缺点:多添加了一层div包裹。
方法二:利用外边距
<style>
* {
margin: 0;
padding: 0;
}
.sitebar {
float: left;
width: 200px;
background-color: green;
}
.content {
background-color: red;
margin-left: 200px;
}
</style>
<div class="sitebar">
左侧定宽200px区块
</div>
<div class="content">
右侧主体自适应区块
</div>
- 优点:代码简洁,便于理解
- 缺点:不利于页面优化,右侧主内容区后加载
方法三:利用position
<style>
* {
margin: 0;
padding: 0;
}
.sitebar {
width: 200px;
background-color: green;
}
.content {
position: absolute;
left: 200px;
right: 0;
top: 0;
background-color: red;
}
</style>
<div class="content">
右侧主体自适应区块
</div>
<div class="sitebar">
左侧定宽200px区块
</div>
- 优点:考虑到了页面优化,右侧内容区先加载
- 缺点:目测没有
上述三种方法兼容 IE7 以上,但在IE7下不设置高度时,会产生高度错位bug。可通过设置父元素 font-size=0 ,再分别设置 子元素 font-size解决。
方法四:利用flex布局
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
}
.content {
flex: 1;
background-color: red;
}
.sitebar {
flex: 0 0 200px;
order: -1;
background-color: green;
}
</style>
<div class="main">
<div class="content">
右侧主体自适应区块
</div>
<div class="sitebar">
左侧定宽200px区块
</div>
- 优点:CSS3新布局方式,高大上
- 缺点:仅支持 IE11+
三列布局:左右定款,中间自适应。
方法一:使用负外边距
<style>
* {
margin: 0;
padding: 0;
}
.main,.left,.right {
height: 300px;
font: 20px/300px;
color: #fff;
text-align: center;
}
.main {
width: 100%;
float: left;
}
.main .content {
margin: 0 300px 0 200px;
background-color: black;
}
.left {
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.right {
width: 300px;
float: left;
margin-left: -300px;
background-color: blue;
}
</style>
<div class="main">
<div class="content">
中间主体区域宽度自适应
</div>
</div>
<div class="left">
左侧定宽200px
</div>
<div class="right">
右侧定宽300px
</div>
- 优点:兼容IE7+,考虑到页面优化,中间内容区先加载
- 缺点:多一层div嵌套,不易理解
方法二:使用绝对定位
<style>
body {
margin: 0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 102px;
margin-left: 102px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="center">
中列
</div>
<div id="left">
左列
</div>
<div id="right">
右列
</div>
- 优点:代码结构简单,考虑到了页面优化,中间内容去先加载
- 缺点:目测没有
方法三:使用flex布局
<style>
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: green;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 200px;
background-color: blue;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background-color: grey;
}
</style>
<div class="HolyGrail-body">
<main class="HolyGrail-content">
...
</main>
<nav class="HolyGrail-nav">
...
</nav>
<aside class="HolyGrail-ads">
...
</aside>
</div>
- 优点:高大上
- 缺点:仅支持IE11+
两列等高布局
利用padding-bottom的正值与margin-bottom的负值相互抵消即可,同时最外层设置overflow:hidden;即可.
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两列等高布局,利用padding-bottom的正值与margin-bottom的负值相互抵消即可</title>
<style>
.main{ width:600px; margin:0 auto; overflow:hidden;}
.left{background:red; width:300px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
.right{background:green; width:300px;float:left;padding-bottom:2000px; margin-bottom:-2000px;}
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>we are good friend</p>
</div>
<div class="right">
<p>we are good friend</p>
<p>we are good friend</p>
<p>we are good friend</p>
<p>we are good friend</p>
</div>
</div>
</body>
</html>