【前端布局】圣杯布局和双飞翼布局

最新推荐文章于 2023-09-18 18:32:45 发布

前端小白多阅读

最新推荐文章于 2023-09-18 18:32:45 发布

阅读量142

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_63514555/article/details/128524159

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局

两者都是三栏布局，两边的盒子宽度固定，中间盒子自适应

区别

由下方代码可见，圣杯布局的中间部分middle放在左边区域left 右边区域right之前，由于中间部分在DOM上优先，以便于优先渲染。

圣杯布局比双飞翼布局多使用了relative相对定位。

处理left区域和right区域，圣杯布局是用padding与relative相对定位实现，双飞翼布局是用中间区域middle套div与margin-left margin-right实现。

圣杯布局（固比固布局）

实现效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header><h4>Header内容区</h4></header>
<div class="container">
    <div class="middle"><h4>中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</h4></div>
    <div class="left"><h4>左边栏</h4></div>
    <div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>
<style>
    header{width: 100%;height: 40px;background-color: darkseagreen;}
    .container{ height:200px;overflow:hidden;padding: 0 200px;}
    .middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
    .left{ width: 200px;height: 200px;background-color: blue;float:left;margin-left:-100%;position: relative; left: -200px;}
    .right{width: 200px;height: 200px;background-color: darkorchid;float:left;margin-left:-200px;position: relative; right: -200px;}
    footer{width: 100%; height: 30px;background-color: darkslategray;}
    h4{margin-top: 0px;}
</style>

双飞翼布局

实现效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <header><h4>Header内容区</h4></header>
    <div class="container">
        <div class="middle"><h4>中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</h4></div>
    </div>
    <div class="left"><h4>左边栏</h4></div>
    <div class="right"><h4>右边栏</h4></div>
    <div class="footer"><h4>Footer内容区</h4></div>
</body>
</html>
<style>
    header{width: 100%;height: 40px;background-color: darkseagreen;}
    .left{width:200px;height: 200px;background-color: blue;margin-left:-100%;float: left;}
    .right{width:200px;height: 200px;background-color: darkorchid;margin-left:-200px;float: left;}
    .container{width:100%;height:200px;float: left;}
    .middle{height:100%;margin-left:200px;margin-right:200px;background-color: deeppink;}
    .footer{height:30px;background-color: darkslategray;clear:both;width:100%}
    h4{margin-top: 0px;}
</style>