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>