<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-columns</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
margin: 20px auto 10px;
width: 700px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!--float实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，另外需要注意清除浮动-->
<section class="float-3-columns">
<style>
.float-3-columns .left {
float: left;
width: 200px;
background: pink;
}
.float-3-columns .right {
float: right;
width: 200px;
background: orange;
}
.float-3-columns .main {
background: #b5d491;
margin-left: 200px;
margin-right: 200px;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="right">right content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
</article>
</section>
<!--absolute实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，影响很大-->
<section class="absolute-3-columns">
<style>
.absolute-3-columns .wrap {
position: relative;
}
.absolute-3-columns .left {
position: absolute;
left: 0;
background: pink;
width: 200px;
}
/*如果main在right前必须要加top:0,main在right后则不需要*/
.absolute-3-columns .right {
position: absolute;
right: 0;
top: 0;
background: orange;
width:200px;
}
.absolute-3-columns .main {
background: #b5d491;
margin-left: 200px;
margin-right: 200px
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--flex实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="flex-3-columns">
<style>
.flex-3-columns .wrap{
display: flex;
}
.flex-3-columns .left {
width: 200px;
background: pink;
}
.flex-3-columns .right {
width: 200px;
background: orange;
}
.flex-3-columns .main {
flex: 1;
background: #b5d491;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--grid实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="grid-3-columns">
<style>
.grid-3-columns .wrap {
display: grid;
grid-template-columns: 200px auto 200px;
}
.grid-3-columns .left {
background: pink;
}
.grid-3-columns .right {
background: orange;
}
.grid-3-columns .main {
background: #b5d491;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
<!--table实现3列布局-->
<!--优点：兼容性好-->
<!--缺点：特性比较复杂-->
<section class="table-3-columns">
<style>
/*tableb默认宽度自适应，需要加width:100%*/
.table-3-columns .wrap {
display: table;
width: 100%;
}
.table-3-columns .left {
display: table-cell;
width: 200px;
background: pink;
}
.table-3-columns .right {
display: table-cell;
width: 200px;
background: orange;
}
.table-3-columns .main {
display: table-cell;
background: #b5d491;
}
</style>
<article class="wrap">
<div class="left">left content</div>
<div class="main">
<p>main content</p>
<p>main content</p>
<p>main content</p>
</div>
<div class="right">right content</div>
</article>
</section>
</body>
</html>
