css布局：圣杯布局

最新推荐文章于 2022-07-05 09:22:37 发布

酷jjs

最新推荐文章于 2022-07-05 09:22:37 发布

阅读量644

点赞数 1

分类专栏：前端笔记 css 文章标签： css布局圣杯布局

本文链接：https://blog.csdn.net/qq_32584661/article/details/52352654

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

圣杯布局：左右两边固定宽度，中间不设置宽度（自适应页面宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{ margin:0;padding: 0;}

        .center{height:500px;background: red; margin: 0 200px;}
        .left{ width:200px;height:500px;background: yellow;position:absolute;left: 0;top:0;}
        .right{ width:200px;height:500px;background: yellowgreen;position:absolute;right: 0;top:0;}

    </style>

</head>
<body>

<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

效果如图所示

酷jjs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css布局：圣杯布局

圣杯布局：左右两边固定宽度，中间不设置宽度（自适应页面宽度）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> *{ margin:0;padding: 0;} .center{height:500px;backgro
复制链接

扫一扫

专栏目录