web前端CSS--关于圣杯布局

最新推荐文章于 2024-07-17 15:26:15 发布

dlp3199

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量105

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wyr407807054/p/11492125.html

版权

<html>
<head>    
    <style>
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }     
        .container {
            width: 1000px;
            background: lightblue;
            margin: 0 auto;
        }     
        .float-left {
            float: left;
        }      
        .main {
            width: 100%;
            height: 500px;
            background: #008c8c;
            border: 2px solid;
            box-sizing: border-box;
            padding: 0 100px;
        }        
        .left {
            width: 100px;
            height: 500px;
            background: red;
            margin-left: -100%;         
        }      
        .right {
            width: 100px;
            height: 500px;
            background: blue;
            margin-left: -100px;
        }
    </style>
<body>
    <div class="container clearfix">
        <div class="main float-left">main</div>
        <aside class="left float-left">left</aside>
        <aside class="right float-left">right</aside>
    </div>
</body>
</html>

参看上方的代码案例：

圣杯布局也分两种情况：

两侧导航栏位于main盒的里面，覆盖了main主区域的一部分位置。
两侧的导航栏位于main盒的外面，不占用main的区域

情况1：设置left盒的margin-left为-100%，因为左右margin的百分比值是相对于父元素宽度的，left盒会被挤到main盒的左上角,right盒只要设置margin-left为-100px就
能被挤到main盒右上角的位置。

情况2：在情况1的基础上，将left和right设置成相对定位，相对自己的位置移动，使用right，left即可调整成不再main盒的里面了，分别排在两侧。

注意：关于两侧导航栏在main区域里的时候，调整main的padding来讲main中的内容完全呈现出来，否则会被left和right覆盖住。

注意：使用background-clip:可以设置背景颜色填充的范围：取值为border-box，padding-box，content-box。

转载于:https://www.cnblogs.com/wyr407807054/p/11492125.html

dlp3199

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端CSS--关于圣杯布局

<html><head> <style> .clearfix::after { content: ""; display: block; clear: both; } .container { ...
复制链接

扫一扫