CSS——圣杯布局

最新推荐文章于 2024-07-14 16:50:03 发布

回首＆逝去～

最新推荐文章于 2024-07-14 16:50:03 发布

阅读量85

点赞数

文章标签： html5 css 前端

本文链接：https://blog.csdn.net/qq_43957263/article/details/119248297

版权

结构：

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

实现原理：

先对main使用padding来空出左右两边内容位置，再对左边内容使用margin-left: -100%;使左边内容与中间内容重合；再使用position: relative;left: -200px;使左边内容定位到左边位置。同理，右边内容使用margin-left: -150px;与中间内容重合；再使用position: relative;left: 150px;定位到右边位置。

效果图：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>css</title>
</head>
<style type="text/css">
    body {
        min-width: 550px;
    }
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .header,
    .footer {
        background: gray;
        width: 100%;
    }
    
    .footer {
        clear: both;
    }
    
    .main {
        height: 200px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }
    
    .left,
    .center,
    .right {
        float: left;
    }
    
    .center {
        width: 100%;
        height: 200px;
        background: red;
    }
    
    .left {
        width: 200px;
        height: 200px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    
    .right {
        width: 150px;
        height: 200px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }
</style>

<body>

    <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">
        底部
    </div>
</body>

</html>

回首＆逝去～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS——圣杯布局

结构：header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。实现原理：先对main使用padding来空出左右两边内容位置，再对左边内容使用margin-left:-100%;使左边内容与中间内容重合；再使用position:relative;left:-200px;使左边内容定位到左边位置。同理，右边内容使用margin-le...
复制链接

扫一扫