CSS经典布局方案--三栏布局
圣杯布局与双飞翼布局
这两种布局非常相似，都是左右固定，中间自适应
圣杯布局：
<style type="text/css">body{width: 100%;height: 100%;overflow: hidden;}.container{height: 100%;/* 左右两边容器宽度都是100px，所以容器左右设置100的内边距 */padding: 0 100px;}.center{width: 100%;background-color: #008000;height: 100px;}.left{width: 100px;background-color: #0000FF;height: 100px;}.right{width: 100px;background-color: brown;height: 100px;}style>head><body><div class="container"><div class="center">div><div class="left">div><div class="right">div>div>body>
此时的页面是这样的：
第一步：给三个div都加上左浮动，因为center已经占满了第一行的内容区，所以left和right会并排放在第二行。
第二步：让三个div位于同一行上，给left加上margin-left:-100%;，它是基于父元素的百分比的，给right加上margin-right:-100px;
第三步：左边的元素需要再忘左移动，给它加上position: relative;left: -100px;
完成。
双飞翼布局：
<div class="clearfix"><div class="container"><div class="center">div>div><div class="left">div><div class="right">div>
div>
与圣杯布局的区别就是，center与left和right分离了。
<style type="text/css">body{width: 100%;height: 100%;overflow: hidden;background-color: #A5A5A5;}.container{width: 100%;}.center{margin: 0 100px;height: 100px;background-color: #98FB98;}.container,.left,.right{float: left;}.left{width: 100px;height: 100px;background-color: #0000FF;}.right{width: 100px;height: 100px;background-color: #00FFFF;}style>
同样地，container有左右内边距，值等同于left与right的宽度，我们也让container、left、right左浮动，注意与圣杯布局的区别就是，left和right是与container同级的，圣杯布局是给center加的左浮动。
接下来，给left加上margin-left: -100%;，right加上margin-left: -100px;
计算属性：CALC（有兼容，且性能不好）
<style type="text/css">/* .container{width: 100%;} */.left,.right{width: 100px;height: 100px;float: left;background-color: #009DFD;}.center{width: calc(100% - 200px);height: 100px;float: left;background-color: #98FB98;}style>
<body><div class="container"><div class="left">div><div class="center">div><div class="right">div>div>
body>
注意这一行：width: calc(100% - 200px);，减号两边必须有空格，100%是屏幕宽度，减去左右两边的宽度，剩余就是center的宽度，三个div要按左中右的顺序写。
flex布局
<style type="text/css">.container{display: flex;/* 左中右排列 项目位于各行之间留有空白的容器内。*/justify-content: space-between;height: 100%;}.left,.right{/* 不放大不缩小 */flex: 0 0 200px;height: 100px;background-color: #00FFFF;}.center{flex: 1;height: 100px;background-color: #008000;}style>
<body><div class="container"><div class="left">div><div class="center">div><div class="right">div>div>
body>
定位
<style type="text/css">.container{position: relative;height: 100%;}.left,.right{position: absolute;top:0;width:200px;height: 100px;background-color: #009DFD;}.left{left: 0;}.right{right: 0;}.center{/* 宽度不写 */margin: 0 200px;height: 100px;background-color: #008000;}style><body><div class="container"><div class="left">div><div class="center">div><div class="right">div>div>
body>
子绝父相，左右两侧通过top、left和right固定位置，中间加margin，宽度自适应。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！