关于圣杯布局

最新推荐文章于 2023-09-19 19:46:20 发布

一个前端程序员

最新推荐文章于 2023-09-19 19:46:20 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/Whileyi/article/details/99617303

版权

经典圣杯布局

页面上显示的效果是左右固定的宽度，中间容器自适应，根据页面大小的变化而变化。

以下方代码为例

<style>
    .left, .right{
        width: 300px;
        height: 300px;
        background-color: aqua;
    }

    .center{
        height: 500px;
        background-color: brown;
        margin-left: 300px;
        margin-right: 300px;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    </style>
</head>
<body>
    <p>浮动和外边距的配合</p>
    <p>先用外边距撑开一个普通元素无法进入的空间，然后将浮动元素排列进去即可，
        最终的目的就是像两个元素横向排列
    </p>
    <main>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
        
    </main>
</body>

效果为这样

在这里插入图片描述

把浏览器窗口缩放以后

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个前端程序员

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于圣杯布局

经典圣杯布局页面上显示的效果是左右固定的宽度，中间容器自适应，根据页面大小的变化而变化。以下方代码为例<style> .left, .right{ width: 300px; height: 300px; background-color: aqua; } .center{ height...
复制链接

扫一扫