三栏布局——圣杯布局

最新推荐文章于 2022-07-12 10:50:49 发布

Chanyelo_

最新推荐文章于 2022-07-12 10:50:49 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/qq_41985171/article/details/82990650

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container {
            overflow: hidden;
            padding: 0 200px;
        }
        .center {
            width: 100%;
            height: 100px;
            float: left;
            background-color: red;
        }
        .left {
            width: 200px;
            height: 100px;
            background-color: green;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 200px;
            height: 100px;
            background-color: blue;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 优先渲染 -->
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

(1)左中右全部向左浮动，父元素清除浮动。中间部分需要根据浏览器宽度的变化而变化，所以要用100%，因为中间100%，左层和右层根本没有位置上去

　　(2)把左层margin-left：-100%后，发现left上去了，因为负到出窗口没位置了，只能往上挪

　　(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位

　　(4)但由于左右栏遮挡住了中间部分，于是给父元素设置左右padding，采用相对定位方法，从center中挪出去，得到最终结果

Chanyelo_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局——圣杯布局

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .container { overf
复制链接

扫一扫