布局篇之圣杯布局

最新推荐文章于 2024-06-17 00:08:19 发布

little_newBee

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量401

点赞数

分类专栏： web方向文章标签：布局

本文链接：https://blog.csdn.net/little_newBee/article/details/78362806

版权

web方向专栏收录该内容

53 篇文章 1 订阅

订阅专栏

圣杯布局的想法就是：外层盒子有中的子盒子都浮动起来，然后先把main固定住，利用margin留出一定空间，再将其他盒子利用marign:-xx%,以及position:relative(可能会用到)进行位置调整。

这里先说一下两列自适应的。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*两栏自适应圣杯布局*/
            .bd-lft{
                width:100%;
                height:700px;
                background:#CCCCCC;
                overflow:hidden;
            }
            .bd-lft .main{
                float:left;
                width:100%;
                margin-left:210px;
                height:100%;
                background: #ADFF2F;
            }
            .bd-lft .aside{
                float:left;
                background: #FF0000;
                margin-left:-100%;
                width:200px;
                height:100%;
                position:relative;
                right:210px;
            }
        </style>
    </head>
    <body>
        <div class="bd-lft">
            <div class="main"></div>
            <div class="aside"></div>
        </div>
    </body>
</html>

效果图

就是上面这个效果。绿色的是main，红色的是aside。这里因为只用到了.main:”margin-left”属性给asdie留出左侧空间，使得width：100%的情况下在右侧发生溢出，虽然容器overflow：hidden让我们看不出来，但是asdie在margin:-100%时还是会把这个部分距离算进去，不用position:relative做调整时，它的效果是这样的：
未调整定位

正好是压在了main的左边线。因此，我们使用position:relative
;right:210px进行调整，就可以了。在f12环境下使用手机模式也是ok的。

三栏自适应的布局方式跟它类似。方式就是：先写容器，所有内容float，先定main，留出margin的左右，再用负margin定位其他两个从div。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*三栏自适应圣杯布局*/
            .bd-lft{
                width:100%;
                height:700px;
                background:#CCCCCC;
                overflow:hidden;
            }
            .bd-lft .main{
                float:left;
                width:70%;
                margin-left:15%;
                margin-right:15%;
                height:100%;
                background: #ADFF2F;
            }
            .bd-lft .aside1{
                float:left;
                background: #FF0000;
                margin-left:-100%;
                width:15%;
                height:100%;
                /*position:relative;
                right:210px;*/
            }
            .bd-lft .aside2{
                float:left;
                background: #FF0000;
                margin-left:-15%;
                width:15%;
                height:100%;
                /*position:relative;
                right:210px;*/
            }
        </style>
    </head>
    <body>
        <div class="bd-lft">
            <div class="main"></div>
            <div class="aside1"></div>
            <div class="aside2"></div>
        </div>
    </body>
</html>