css布局之三列布局
网站上使用三列布局的还是比较多的,不过三列和两列有些相似：
1.自适应三列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
}
.left{
float: left;
width: 33.3%;
height: 300px;
background-color: #ccc;
}
.middle{
float:left;
width: 33.3%;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: right;
width: 33.3%;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
2.固定两列，自适应中间一列
这个要考虑多种情况，我就遇见过下面的情况，大家可以看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
margin-left:200px;
margin-right:200px;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: right;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div>
</div>
</body>
</html>
这个是下面截图的样子
看见没有，是这样的，但是如果我吧<div class="middle">放在最后，效果又不一样
所以这个效果达到效果，这个也是三列布局，所以这个方式有点bugger，大家可以注意
我们可以用用绝对定位，其实实现三列布局很多种方式，你也可以用table来实现，li来实现等方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
position: relative;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
margin-left:200px;
margin-right:200px;
height: 300px;
background-color: #9c9c9c;
}
.right{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div>
</div>
</body>
</html>
3.固定三列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列两固定中列自适应布局</title>
</head>
<style>
.wrapper{
width: 880px;
height: 300px;
margin:0 auto;
position: relative;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.middle{
float: left;
width: 480px;
height: 300px;
background-color: #9c9c9c;
}
.right{
float: left;
width: 200px;
height: 300px;
background-color: #198610;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right"></div>
</div>
</body>
</html>
我们这里都是做悬浮做了三列固定导航，如果在<div class="wrapper"></div>
后加上一个<div class="footer"></div> 那么就要清除悬浮，清楚悬浮的方式有几种，后面我们会讲到 clear:both;或者在wrapper的类中加入 overflow:hidden. 或 :after :before等伪类的定义，清除悬浮
