CSS实现三列布局（左右固定宽度，中间自适应）
CSS 实现三列布局，左右固定宽度，中间自适应，如下图所示：
1、绝对定位法
原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的 middle 会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ position: relative; width: 100%; height: 500px; } .left{ position:absolute; top: 0; left: 0; width: 200px; height: 100%; background-color: #3898b1; } .right{ position:absolute; top: 0; right: 0; width: 200px; height: 100%; background-color: #ce7486; } .middle{ margin: 0 200px; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> </body>
2、自身浮动法
原理就是对左右分别左浮动和右浮动，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
该布局法的不足是三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ width: 100%; height: 500px; } .left{ float: left; width: 200px; height: 100%; background-color: #3898b1; } .right{ float: right; width: 200px; height: 100%; background-color: #ce7486; } .middle{ margin: 0 200px; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div> </body>
3、flex 布局法
原理就是为父元素添加样式display：flex，左右固定宽度，中间设置flex:1,middle一定要放在中间。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ display: flex; width: 100%; height: 500px; } .left{ width: 200px; height: 100%; background-color: #3898b1; } .right{ width: 200px; height: 100%; background-color: #ce7486; } .middle{ flex: 1; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> </body>
4、圣杯布局
原理主要是margin负值法，接下来我们一步一步分析它的实现过程：
- middle 一定要写在最前面
<div class="main"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div>
- left和right设置固定宽度，middle设置100%撑满：
<style> *{ margin: 0; padding: 0; font-size: 50px; } .left{ width: 200px; background-color: #3898b1; } .right{ width: 200px; background-color: #ce7486; } .middle{ width: 100%; background-color: #cbaf91; } </style>
- 设置全部左浮动，由于middle宽度为100%，所以占了一行
.left,.right,.middle{
float: left;
}
- left设置 margin-left: -100%; 拉回行头
设置margin-left为负值会让元素自身位置发生变化，由于浮动的关系，元素被往左拉了一个center元素的宽度(100%)故回到了开头
- right元素设置
margin-left: -200px;拉回行尾
- 现在的问题就是左右两边的元素覆盖了center元素的内容，我们可以给容器main加上两边padding
.main{
padding: 0 200px;
}
- 在设置了padding后，左右元素都被挤了进来，我们可以设置position:relative解决，因为浮动元素已经脱离了文档流，所以不能设置absolute。 通过设置left和right元素的相对位置，实现定位：
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ padding: 0 200px; } .left,.right,.middle{ position: relative; float: left; } .left{ margin-left: -100%; left: -200px; width: 200px; background-color: #3898b1; } .right{ margin-left: -200px; right: -200px; width: 200px; background-color: #ce7486; } .middle{ width: 100%; background-color: #cbaf91; } </style>
