css中圣杯布局

最新推荐文章于 2022-09-15 17:25:04 发布
最新推荐文章于 2022-09-15 17:25:04 发布
阅读量38 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44017778/article/details/116606362
版权

左右两侧宽度固定，中间宽度自适应的三列布局

- 1）HTML结构中，先主体内容后侧边

- 2）两侧宽度固定，中间宽度设置100%

- 3）两侧盒子和中间盒分别加浮动（float: left);

- 4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉倒最右边（margin-left: -右侧盒子的宽度）

- 5）通过左、右、中盒子的父级盒将中间内容露出来（在父元素上设置padding: 0 右侧盒子的宽度 0 左侧盒子的宽度）

- 6）分别还原左侧盒子和右侧盒子（左侧盒设置position: relative; left: -左侧盒子的宽度; 右侧盒设置position: relative; right:-右侧盒子的宽度）

Dz329
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS Flex布局 （弹性布局）(圣杯布局)
m0_69793485的博客
05-14 581
Flex布局（弹性布局）的特点 1.浏览器提倡的布局模型，页面渲染性很高。 2.布局简单，方便。 3.可以避免浮动脱标的问题。 4.兼容性高（不兼容低版本的浏览器） Flex布局模型构成 设置方式： 给父元素设置display:flex,子元素可以自动的挤压或拉伸； 组成部分 1.弹性容器（父级，添加了display:flex的盒子） 2.弹性盒子（子级） 3.主轴（默认水平） 4.侧轴 / 交叉轴（默认垂直） 主轴对齐方式 justify-content： flex-star
圣杯布局(css)
Y0admin的博客
10-27 1224
圣杯布局 1. DOM结构 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <d
css中的圣杯布局
weixin_72303943的博客
07-05 1240
圣杯布局代码的写法
css实现圣杯布局的四种方式
qq_33721778的博客
09-15 1925
圣杯布局如下图指的是两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。本篇文章整理了几种圣杯布局的实现方式，欢迎各位大佬进行补充。HTML代码
CSS3实现圣杯布局
程文英
03-13 123
使用flex实现圣杯布局 日常开发环境中C3带给我们的方便之处越来越多，今天就简单的写一个使用flex实现其圣杯布局的方式 .wrapper{ width: 500px; height: 500px; border: 1px solid #000; display: flex; flex-direction: column; } .head ,.footer,.left,.right{ flex: 0 0 20%; border: 1p
CSS之圣杯布局
Skrupellose博客
07-22 353
圣杯布局，即从上到下由页头、内容、页脚组成，其中内容又由左中右三种布局组成，左右内容区域宽度固定，中间自适应。 那么我们先来写HTML基本结构： <body> <header class="header">header</header> <div> <section class="center">cente...
CSS中的圣杯布局与双飞翼布局
Just for funnnnnnnnnnnn
10-31 265
圣杯布局和双飞翼布局也是实现二&三列布局的有效方式，我将在本文中记录它们的原理和实现。圣杯布局原理：圣杯布局在所有列的最外层增加了一个含有padding的wrapper，通过定位，负边距将两个侧边栏移动至wrapper的padding处，实现三列布局。实现步骤： 进行wrapper的padding设置，使其大于等于对应边栏的宽度，用来容纳边栏。对两个侧边栏设置左浮动，使其紧贴主栏下面的左侧。（在HT
CSS3圣杯布局
yf19990720的博客
07-27 156
CSS3圣杯布局 圣杯布局：左右两列宽度固定，中间列自适应。圣杯布局，是学习css3后，常见的布局之一。 窗口最大化示例： 窗口缩小后，两边宽度不变，中间缩小： 源码 先设置一个头部，中间，底部。中间又分为左中右三部分。 <div class='container'> <header>头部</header> <section> <div class='left'>左</div&gt
CSS实现圣杯布局（双飞翼布局）的四种方式
一个普通人的博客
08-29 1260
总结了原生JS实现圣杯（双飞翼）布局的四种方式
“人力资源+大数据+薪酬报告+涨薪调薪”
08-12
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
深度报告-20231012-东海证券-电力设备与新能源行业深度报告-长时储能东风起-钒电需求待腾飞-42页-3mb.pdf
08-12
深度报告-20231012-东海证券-电力设备与新能源行业深度报告_长时储能东风起_钒电需求待腾飞_42页_3mb.pdf
基于Python+JavaScript实现的联邦学习网站系统源码+文档说明(高分毕业设计)
08-12
<项目介绍> 毕设 前端： React-Hook Material UI axios请求数据 token头请求验证 Echarts图可视化 后端： Django框架 写API运行算法传数据 在本系统中，用户通过邮箱注册后登录进入首页，可以通过导航栏快速跳转到实验设置，实验过程，实验数据查看和退出登录等，也可以通过侧边栏来选择算法进行实验，点击不同的 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于Springboot和Vue的公司日常考勤系统源码 公司日常考勤系统代码（优秀毕业设计）
08-12
公司日常考勤系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
vue2+vuex3+vur-router3
08-12
vue2+vuex3+vur-router3
基于Springboot和Vue的手机商城设计与开发源码 手机商城设计与开发代码（高分优秀毕业设计）
最新发布
08-12
手机商城设计与开发源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
按钮(Buttons)-Qt-思维导图-学习笔记
08-12
按钮是 Qt 中常用的控件，广泛应用于嵌入式系统和 PC 端的界面交互中。Qt 提供了六种内置按钮部件，包括 QPushButton、QToolButton、QRadioButton、QCheckBox、QCommandLinkButton 和 QDialogButtonBox。QPushButton 是最常用的下压按钮，常用于触发命令或事件。QToolButton 则多用于工具栏中的快速访问按钮，通常显示图标。QRadioButton 提供互斥选择功能，适合“多选一”场景。QCheckBox 支持多选多，常用于设置选项。QCommandLinkButton 类似于普通按钮，但带有箭头图标，指示点击后将执行进一步操作。QDialogButtonBox 用于对话框中的自定义按钮。通过信号与槽机制，这些按钮可以与各种事件和操作紧密结合，实现丰富的人机交互。
【C++期末/课程设计】学生选修课程信息管理系统(VS2022项目)
08-12
题目描述 学生选课信息包括:学号、姓名、选修课程名称、学分，开课学期。试设计一学生选课管理，使之能提供以下功能: 1)系统以菜单方式工作(用键盘输入1~7之间的数来选择功能，其中7为退出); 2)学生选课信息录入功能（包括学号、姓名、课程名称、学分、开课学期); 3)学生选课信息整体浏览功能; 4)按学号查询学生选课信息; 5)按课程名查询统计选课学生人数信息; 6)按照“选修课程名称”修改开学学期的信息; 7)按照输入的学号信息的删除学生选课信息。 8)所有数据符合实际应用要求。
毕业设计php飞机票预订查询系统-qkrp源码含文档工具包
08-12
毕业设计php飞机票预订查询系统-qkrp源码含文档工具包 php，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 3.1 管理员功能需求 （1）管理员登录和身份验证。 （2）查看站点的基本信息，包括已经注册会员的数量，管理员发布的新航班信息和注册用户 订单、留言、订购机票的数量等。 （3）管理订单源，主要是对注册用户提交的未结帐的订单进行删除操作。 （4）管理航班信息，包括增加、修改和删除航班信息。 （5）添加新航班信息，把要发布的新航班的一些相关信息录入到数据库。 （6）管理新航班信息，查看管理员发布的航班信息信息和对新航班的信息进行删除操作。 3.2 注册用户功能需求 （1）新用户的注册。 （2）用户的登录和身份验证。 （3）查询航班信息。 （4）预订机票，把用户预订机票的信息添加到数据库。 （5）取消订单，用户可以取消自己之前的订单重新订购。 （6）显示用户的订购信息。 （7）留言，用户可以发表自己的意见和想法来跟管理员交流。 （8）修改注册信息。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文
css圣杯布局左右布局
08-18
CSS圣杯布局是一种经典的三栏布局，其中左右两栏宽度固定，中间栏宽度自适应。以下是一种实现圣杯布局的方法： HTML结构： ```html 主内容 左侧栏 右侧栏 ``` CSS样式： ```css .container { padding: 0 200...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值