菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >前端 >

网页三栏布局常用方法

三栏布局

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

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

第二种:浮动

结构 <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) ,但兼容性不好 不推荐使用就不说了 个人建议用圣杯布局

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