前端Html常见布局之一——圣杯布局

尊贵小白兔

已于 2022-03-17 21:45:52 修改

阅读量211

点赞数

文章标签： html 前端 css

于 2022-03-17 21:45:14 首次发布

本文链接：https://blog.csdn.net/weixin_40437521/article/details/123561534

版权

文章目录

圣杯布局
一、Html
二、Css
三、效果图

圣杯布局

一、Html

<body>
    <div class="container">
        <div class="center">
            hhhhhhhhhhhhh
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

二、Css

<style>
    .container {
        padding: 0 100px 50px;
    }

    .center {
        float: left;
        width: 100%;
        height: 200px;
        background-color: pink;
    }

    .left {
        position: relative;
        float: left;
        width: 100px;
        height: 200px;
        background-color: green;
        margin-left: -100%;
        left: -100px;
    }

    .right {
        position: relative;
        float: left;
        width: 50px;
        height: 200px;
        background-color: purple;
        margin-left: -50px;
        left: 50px;
    }
</style>

三、效果图

在这里插入图片描述

尊贵小白兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端Html常见布局之一——圣杯布局

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录圣杯布局一、Html二、Css三、效果图圣杯布局一、Html<body> <div class="container"> <div class="center"> hhhhhhhhhhhhh </div> <div class="left">left</div> .
复制链接

扫一扫