圣杯布局的三种写法

最新推荐文章于 2024-07-17 16:42:38 发布

冯小小猿

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量159

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_38735381/article/details/129006237

版权

圣杯布局通俗点说就是：中间盒子宽度自适应，两边盒子固定宽度，并且中间盒子放在最前面，便于优先加载。

通过网上的资料查询，大致总结了三种写法

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>圣杯布局</header>
    <div class="main">
        <div class="center">一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <footer>脚部</footer>
</body>
<style >
    .main{
      padding: 0 100px;
      background-color: red;

    }
    .main::after{
        content: "";
        display: block;
        clear: both;
    }
    .center {
        width: 100%;
        height: 100px;
        background: lightblue;
        float: left;
    }
    .left{
        width: 100px;
        height: 100px;
        background: lightgreen;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -100px;

    }
    .right{
        width: 100px;
        height: 100px;
        background: yellow;
        float: left;
        margin-left: -100px;
        position: relative;
        right: -100px;
    }
    footer{
        background-color: bisque;
    }
</style>
</html>

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>圣杯布局</header>
    <div class="main">
        <div class="wapper">
            <div class="center">一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <footer>脚部</footer>
</body>
<style >
    .wapper{
        width: 100%;
        height: 100px;
        background: lightblue;
        float: left;
       
    }
    .center {
        margin: 0 100px;
      
    }
    .left{
        width: 100px;
        height: 100px;
        background: lightgreen;
        float: left;
        margin-left: -100%;

    }
    .right{
        width: 100px;
        height: 100px;
        background: yellow;
        float: left;
        margin-left: -100px;
    }
    footer{
        background-color: bisque;
    }
</style>
</html>

第三种：利用的弹性布局，个人觉得这种代码最少，且项目中用到flex的最多，是最合适的一种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>圣杯布局</header>
    <div class="main">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <footer>脚部</footer>
</body>
<style >
    .main{
        display: flex;
    }
    .center {
        width: 150px;
        height: 100px;
        background: lightblue;
        flex-grow:1;
        order: 2;
    }
    .left{
        width: 150px;
        height: 100px;
        background: lightgreen;
        order: 1;
    }
    .right{
        width: 100px;
        height: 100px;
        background: yellow;
        order: 3;
    }
    footer{
        background-color: bisque;
    }
</style>
</html>