两种方式实现圣杯布局

圣杯布局又被称为双飞布局,比较简单,今天我给大家分享一下,如何用两种方式来实现双飞布局。那什么是双飞布局呢,其实就是两侧宽度固定,中间宽度自适应的三栏布局。
1.第一种相对来说比较容易想到,就是利用定位来实现
实现原理就是既然两侧需要固定宽度,那索性就用定位中的绝对定位,让其固定在两侧,然后中间那块只要定位在合适的为置就可以了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双飞-定位</title>
<style>
*{margin:0;}
.left{width:200px;background:#f00;position:absolute;top:0;bottom:0;}
.center{background:#0f0;position:absolute;top:0;bottom:0;
left:220px;right:220px;}
.right{width:200px;background:#00f;position:absolute;top:0;bottom:0;right:0;}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>

第二种就是利用弹性盒来实现
其实现原理就是利用弹性盒的的特性,左右两边给个固定宽度,然后设置成将剩余的空间分配给中间那块就可以

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双飞-弹性盒</title>
<style>
*{margin:0;}
html,body{height:100%;}
body{display:flex;}
.left{width:200px;background:#f99;}
.center{flex:1;background:#0f0;margin:0 20px;}
.right{width:200px;background:#99f;}
</style>
</head>
<body>    
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

你可能感兴趣的:(html+css)