float布局: float + margin
position布局: position + left + right
table布局: table+ table-cell
flex布局: flex
grid布局: 略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用float实现三列布局[注意:中间div标签放的位置,必须放在末尾,放在中间会把右侧的div挤下去]</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: chartreuse;
}
.right {
float: right;
width: 100px;
height: 100px;
background-color: chocolate;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用position实现三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main div {
height: 100px;
}
.left {
position: absolute;
left: 0;
width: 100px;
background-color: cornflowerblue;
}
.right {
position: absolute;
right: 0;
width: 100px;
background-color: crimson;
}
.center {
position: absolute;
left: 100px;
right: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用table布局是现三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: table;
}
.left,
.center,
.right {
display: table-cell;
}
.left {
width: 100px;
height: 100px;
background-color: darkcyan;
}
.right {
width: 100px;
height: 100px;
background-color: darkgoldenrod;
}
.center {
height: 100px;
background-color: darkmagenta;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性flex实现三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
}
.left {
width: 100px;
height: 100px;
background-color: darkcyan;
}
.right {
width: 100px;
height: 100px;
background-color: darkgoldenrod;
}
.center {
width: calc(100% - 200px);
height: 100px;
background-color: darkmagenta;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用网格(grid)布局实现三列布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main div {
width: 100px;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto 100px;
}
.left {
background-color: darkcyan;
}
.right {
background-color: darkgoldenrod;
}
.center {
background-color: darkmagenta;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
总结:
以上提供了5种实现三栏布局的方式那么他们的优缺点呢?
1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局
3、table布局使用起来方便,兼容性也不存在问题,不利于搜索引擎抓取信息
4、flex布局比较强大,但是还是存在IE上兼容性问题,只能支持到IE9以上
5、grid布局很强大,但是兼容性很差。
参考链接:https://www.cnblogs.com/webtaotao/p/11031723.html