双飞翼布局和圣杯布局代码

最新推荐文章于 2022-12-29 17:17:02 发布

weixin_41854000

最新推荐文章于 2022-12-29 17:17:02 发布

阅读量246

点赞数

分类专栏：前端文章标签：双飞翼圣杯

本文链接：https://blog.csdn.net/weixin_41854000/article/details/79814912

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

 圣杯布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    header{height: 50px;background: red;}
    .container{padding:0 200px;overflow: hidden;}
    .middle,.left,.right{height: 100px;}
    .middle{float:left;width:100%;background: blue;}
    .left{float:left;position:relative;left:-200px;margin-left:-100%;width:200px;background: orange;}
    .right{float:left;position:relative;right:-200px;margin-left:-200px;width:200px;background: green;}
    footer{height:50px;background:gold}
</style>
</head>
<body>
    <header></header>
    <div class="container">
        <div class="middle">圣杯布局</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

双飞翼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    header{height: 50px;background: red;}
    .container{overflow: hidden;}
    .middle,.left,.right{height: 100px;}
    .middle{float:left;width:100%;background: blue;}
    .middle .inner{margin:0 200px;}
    .left{float:left;margin-left:-100%;width:200px;background: orange;}
    .right{float:left;margin-left:-200px;width:200px;background: green;}
    footer{height:50px;background:gold}
</style>
</head>
<body>
    <header></header>
    <div class="container">
        <div class="middle"><div class="inner">双飞翼</div></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

两者差异来自子div（div.inner）。圣杯布局通过设置容器的padding使左中右三部分压缩中间，再通过position移动左右部分实现中间自适应，两边宽度确定。而双飞翼布局通过设置子div的margin使得呈现的内容在中间，不被左右部分挡住。

weixin_41854000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局和圣杯布局代码

圣杯布局&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Titl
复制链接

扫一扫