适用：高度固定 左右宽度固定 中间自适应
<html>
<head>
<title>三栏布局</title>
<meta charset="utf-8">
<style>
* {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 100px;
}
</style>
</head>
<body>
<section class="layout float">
<style>
.layout.float .left-right-center .left {
float: left;
width: 300px;
background-color: blue
}
.layout.float .left-right-center .right {
float: right;
width: 300px;
background-color: red;
}
.layout.float .left-right-center .center {
overflow: auto;
}
.layout.float .left-right-center::after{
content: '';
display: block;
clear: both;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案：</h1>
<p>中间宽度小会跑到下边去 用bfc</p>
</div>
</article>
</section>
<section class="layout position">
<style>
.layout.position {
margin-top: 20px;
position: relative;
}
.layout.position .left-right-center .left {
top: 0;
left: 0;
width: 300px;
background-color: blue;
position: absolute;
}
.layout.position .left-right-center .right {
top: 0;
right: 0;
width: 300px;
background-color: red;
position: absolute;
}
.layout.position .left-right-center .center {
margin-left: 300px;
margin-right: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>决对定位解决方案：</h1>
<p>绝对定位1.左中右都是绝对定位 中间用 left right 1.左右用决对定位 中间用margin-left margin-right</p>
</div>
</article>
</section>
<section class="layout flex">
<style>
.layout.flex {
margin-top: 20px;
}
.layout.flex .left-right-center {
display: flex;
}
.layout.flex .left-right-center .left {
flex: 0 0 300px;
width: 300px;
background-color: blue;
}
.layout.flex .left-right-center .right {
flex: 0 0 300px;
width: 300px;
background-color: red;
}
.layout.flex .left-right-center .center {
flex: 1;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
<p></p>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style>
.layout.table {
margin-top: 20px;
}
.layout.table .left-right-center {
display: table;
width: 100%;
}
.layout.table .left-right-center>div {
display: table-cell;
height: 100px;
}
.layout.table .left-right-center .left {
width: 300px;
background-color: blue;
}
.layout.table .left-right-center .right {
width: 300px;
background-color: red;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>table解决方法</h1>
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style>
.layout.grid {
margin-top: 20px;
}
.layout.grid .left-right-center {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-right-center .left {
background-color: blue;
}
.layout.grid .left-right-center .right {
background-color: red;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方法</h1>
</div>
<div class="right"></div>
</article>
</section>
<div>
总结:
以上提供了5种实现三栏布局的方式那么他们的优缺点呢？
<p> 1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。</p>
<p> 2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局</p>
<p> 3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息</p>
<p> 4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上</p>
<p> 5、grid布局很强大，但是兼容性很差。ie不支持</p>
</div>
</body>
</html>
<!-- <script src="../js/jquery.min.js"></script> -->
<script>
</script>
