网页三栏布局常用方法 wordpress必须禁用REST API和移除WP-JSON链接的方法 面试官让我用纯css做一个下拉菜单,一分钟搞定!! CSS常用样式(二):绘制双箭头 住建部重申“房子是用来住的”;商务部公布禁塑时间表;在线旅游网站不得大数据杀熟 给大数据杀熟戴上“紧箍咒” RT-Thread推物联网操作系统!300秒启动安防摄像机 如何用一句话激怒程序员! 吉利在青岛成立物联网、卫星技术新公司 统计学和大数据之间有哪些联系 图说:九月开门红 大数据揭示A股九月行情走向 物联网时代下的“芯机遇”,「芯来科技」打造国产RISC-V生态 汇顶科技:指纹芯片巨头半年研发投入增八成,拓展物联网、汽车电子等领域应对风险 新华网|福州:树立物联网产业“马尾坐标” 「行走自贸区」福州:树立物联网产业“马尾坐标” k8s跨namespace访问服务 Mysql关键字和保留字(注意) ALTER command denied to user 'dev'@'192.168.10.xxx' for table 'xx_fanv_fail' oracle授权查询 ffmpeg vsync参数分析 小程序云函数中用group分组查询,只能查询20条,怎么解决? 【MyBatis&MyBatis-plus】分页查询避免两次查询同时返回总数和数据 数据库执行update语句没有反应,一直转圈,数据库锁表处理解决方法 按键精灵-自定义函数time(),datetime(),diff() 在Vue+Element中,Select选项值动态从后台接口获取的实现方法 mongoTemplate的方法和update() 欧科云链OKLink推出“链上天眼”功能 区块链+大数据全面助力链上安全 第二届微热点大数据论坛将于9月5日开幕 网龙参与全国教育大数据统计 构建五级服务支撑体系 无代码app制作崛起,app开发已不再是程序员的专利了 torch深入学习之凤飞九天torch.nn.MarginRankingLoss 【机器学习】—各类梯度下降算法 简要介绍 隐马尔可夫模型(HMM)来龙去脉(二) 单智能体、多智能体强化学习基本概念及算法分类?为啥提出多智能体强化学习,现状? 张量网络算法基础(八、张量网络机器学习【上】) MapReduce 简介 Python爬虫入门教程 81-100 小众爬虫框架looter,框架作者竟然在官方手册开车 机器人二维导航教程汇总 mapper 使用示例 Redis的概念及关系型与非关系型数据库对比 MySQL必知必会:使用WHERE、正则表达式、通配符过滤数据 Solr的增量更新和全量更新对比 MYSQL数据库维护 MATLAB与Mysql数据库连接并数据交换(基于ODBC) 数据库:PostgreSQL:基础功能使用介绍 MYSQL 5.7 高级SQL语句(3)——数据库函数和存储过程 mysql导出数据到表格讲解大全(导出数据带表头,导出数据中文乱码问题解决) SpringBoot升级/指定jackson版本 JAVA - EnumMap与EnumSet简单总结 js获取主机mac等信息【亲测有效】-- 附执行结果&代码
您的位置:首页 >前端 >

网页三栏布局常用方法

三栏布局

三栏布局 在网页布局中算是 比较长江的一种,比如淘宝等,诸多网站都是用的三栏布局
它是 两边元素固定,中间自适应,并且 中间的元素优先渲染

第一种:定位
也是比较粗暴的一种定位 但本人不建议使用布局容易混乱

第二种:浮动

结构 <div class="container"><div class="left">Left</div><div class="right">Right</div><div class="main">Main</div></div>
body,html{height: 100%;padding:0;margin: 0;}/*左边栏左浮动*/.left{float:left;height:100%;width:100px;background:#ff69b4;}/*中间栏自适应*/.main{height:100%;margin:0 200px 0 100px;background: #659;}/*右边栏右浮动*/.right{float:right;height:100%;width:200px;background:#ff69b4;}

特点:

简单,兼容性好
当中间内容高于两侧时,两侧高度不会随中间内容变高而变高

flex布局

结构与上一种方式结构一样(同上)下面我就不写了

样式

.container{display: flex;}.left{width:200px;background: red;}.main{flex: 1;background: blue;}.right{width:200px;background: red;}

特点:

简单、优雅
未来发展趋势,实用
三栏高度统一

table布局

 <div class="container"><div class="left">left</div><div class="main">center</div><div class="right">right</div></div>

样式

 .container{display: table;width:100%;}.container>div{display: table-cell;}.left{width: 100px;background: red;}.main{background: blue;}.right{width: 200px;background: red;}

圣杯布局

<body><div class="wrap"><div class="main"> 两边元素固定,中间自适应,并且 中间的元素优先渲染</div><div class="left">left</div><div class="right">right</div> </div></body>

样式

<style>.wrap{padding: 0 300px 0 200px;}.main, .left, .right{float: left;width: 100%;}.main{background-color: #ccc;}.left{background-color: #ffb;position: relative;width: 200px;left: -200px;margin-left: -100%;}.right{background-color: #f65;position: relative;width: 300px;right: -300px;margin-left: -300px;}</style>

将wrap设置padding,是为了将left, 和right的位置预留出来,否则左右部分会覆盖在中间内容上。
重点:负边距
当我们给元素加上相反的负边距的时候,它会认为它前面的元素的宽度减少了这么多,而实际上前者的宽度并没有改变,最终的效果为:加负边距的元素浮在了它前面元素的上方

双飞翼布局(float)

<body><div class="wrap"><div class="main"><div class="content">两边元素固定,中间自适应,并且 中间的元素优先渲染</div></div><div class="left">left</div><div class="right">right</div></div></body>

它由淘宝首创,和圣杯布局实现的效果几乎一样,核心也都是负边距的应用,只不过文档结构和样式略有区别。

<style>.main, .left, .right{float: left;}.main{background-color: #ccc;width: 100%;}.main .content{margin-left: 200px;margin-right: 300px;}.left{background-color: #ffb;width: 200px;margin-left: -100%;}.right{background-color: #f65;width: 300px;margin-left: -300px;}</style>

中间部分加了一个div 用来放内容 ,当left 和 right 浮在它(div main)上面的时候 不至于覆盖住它的内容

还有一种 网格布局(grid) ,但兼容性不好 不推荐使用就不说了 个人建议用圣杯布局

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。