css中三栏布局之两边宽度固定，中间宽度自适应-5种方法总结——flex布局、浮动布局、绝对定位布局、圣杯布局、双飞翼布局
方法一：使用flex布局，是最简便的。
为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局。
flex-direction：row表示布局的排列方式为按行排列。
flex：1表示来分配剩余空间，用来表示占多少份数
效果
代码
<div class="layout"> <header>#header</header> <div class="container"> <div class="left">#left</div> <div class="center">#center</div> <div class="right">#right</div> </div> <footer>#footer</footer> </div> <style> .container {
display: flex; flex-direction: row; width: 100%; height: 500px; } .container .left {
width: 200px; background-color: skyblue; } .container .center {
height: 100%; flex: 1; background-color: rgb(186, 206, 223); } .container .right {
width: 200px; background-color: darkgray; } </style> 方法二：使用浮动来实现
使用浮动来实现，左边盒子左浮动，右边盒子右浮动，中间的盒子自适应。
注意：这里需要注意的是html部分，必须将中间的盒子放到最后，因为左边盒子左浮动，中间盒子若在中间，会自动占满整行，右边盒子会换行。只有确定了左右浮动，再将中间盒子自适应插入。
效果
代码
<div class="container"> <div class="left">#left</div> <div class="right">#right</div> <div class="center">#center</div> </div> <style> .container {
width: 100%; height: 500px; } .container .left {
width: 200px; height: 500px; float: left; background-color: skyblue; } .container .center {
height: 500px; background-color: rgb(186, 206, 223); } .container .right {
width: 200px; height: 500px; background-color: darkgray; float: right; } </style> 方法三：使用绝对定位来实现
给父盒子设置相对定位，子盒子设置绝对定位，都依据父盒子来进行偏移。左边盒子上左偏移量为0，右边盒子上右偏移量为0，中间盒子自适应，和方法二中的浮动类似。但是html布局文件不用更改。
效果-同2
代码
<div class="container"> <div class="left">#left</div> <div class="right">#right</div> <div class="center">#center</div> </div> <style> .container {
width: 100%; height: 500px; position: relative; } .container .left {
width: 200px; height: 500px; background-color: skyblue; position: absolute; top: 0; left: 0; } .container .center {
height: 500px; background-color: rgb(186, 206, 223); } .container .right {
width: 200px; height: 500px; background-color: darkgray; position: absolute; top: 0; right: 0; } </style> 方法四：圣杯布局
父盒子padding+三个盒子浮动+左右盒子相对定位并负边距。
布局这里要注意：中间盒子结构放在最前边
效果
代码
<header>#header</header> <div class="container"> <div class="center">#center</div> <div class="left">#left</div> <div class="right">#right</div> </div> <footer>#footer</footer> <style> header {
background-color: grey; width: 100%; height: 50px; line-height: 50px; text-align: center; } .container {
height: 500px; padding-left: 200px; padding-right: 300px; } .left {
height: 100%; width: 200px; background-color: skyblue; margin-left: -100%; position: relative; left: -200px; } .center {
width: 100%; height: 100%; background-color: rgb(186, 206, 223); } .right {
width: 300px; height: 100%; background-color: darkgray; margin-left: -300px; position: relative; right: -300px; } .left, .center, .right {
text-align: center; line-height: 500px; float: left; } footer {
width: 100%; height: 50px; background-color: rgb(109, 108, 108); line-height: 50px; text-align: center; clear: both; } </style> 方法五：双飞翼布局
三个盒子浮动+中间盒子左右margin留位+左右负边距。
注意：
中间盒子外边要套个盒子，若只是给中间盒子设置外边距，会撑大整个盒子的宽度，影响布局。
效果
代码
<div class="container"> <div class="wrapper"> <div class="center">#center</div> </div> <div class="left">#left</div> <div class="right">#right</div> </div> <style> .container {
height: 500px; } .left {
height: 100%; width: 200px; background-color: skyblue; margin-left: -100%; } .wrapper {
width: 100%; height: 100%; background-color: rgb(186, 206, 223); } .center {
height: 100%; margin-left: 200px; margin-right: 300px; } .right {
width: 300px; height: 100%; background-color: darkgray; margin-left: -300px; } .left, .wrapper, .right {
text-align: center; line-height: 500px; float: left; } </style> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/10855.html