html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局
三列自适应布局通常指两边定宽,中间部分宽度自适应。这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。
基于传统的position进行布局
这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法。
1).绝对定位法
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
该法布局的好处:三个div顺序可以任意改变;不足:因为绝对定位,所以如果页面上还有其他内容,top的值需要小心处理,最好能够对css样式进行一个初始化,如果不对样式进行初始化,则两边和中间的值会对不齐。 另外,随着浏览器窗口缩小,小于200px的时候,会发生压缩。
2).使用自身浮动法
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
该布局使用左右中或者右左中的顺序编写html结构,这种布局方法的好处:受外界影响小,但是不足:三个元素的顺序,center一定要放在最后,这是和绝对定位不一样的地方,center占据文档流位置,所以一定要放在最后,左右两个元素位置没有关系。当浏览器窗口很小的时候,右边元素会被挤到下一行。
3).圣杯布局
圣杯布局的原理是margin-left负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合。
该方法在网站布局中非常常见,也是面试常考点,优点是三栏相互关联,有一定的抗性。需要注意的是,布局中间部分一定要放在前面,左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。
以上部分主要参考:使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)该作者列举了相关的很好的例子万分感谢,以下是我对两栏布局的思考,概念部分不再复述。
两栏布局
1.side左边宽度固定,main右边宽度自适应:
圣杯布局
.clearfix:before,
.clearfix:after{content: ' ';display: table;}
.clearfix:after{clear:both;}
.wrap{width: 100%;height: 200px;background-color: #fff;float: left;}
.main{height: 200px;margin-left: 210px;background-color: #378;}
.side{float: left;margin-left: -100%;width: 200px;height: 200px;background-color: #cccccc;}
.footer{width: 100%;height: 100px;background-color: #eee;}
使用margin负值法进行布局
底部
自身浮动法
.clearfix:before,
.clearfix:after{content: ' ';display: table;}
.clearfix:after{clear:both;}
.side{float: left;width: 200px;height: 200px;background-color: #ccc; }
.main{margin-left: 210px;background-color: #478;height: 200px;}
footer{width: 100%;height: 100px;background-color: #eee;}
使用margin负值法进行布局
底部
使用该方法如将宽度自适应部分(在此处为main部分)设置width:100%;此时main中margin-right将不起作用。在左侧宽度自适应,右侧宽度固定的布局中这一点尤为重要。
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局相关推荐
- 如何排两列的序计算机考试,excel中两列数据怎么一起排序?excel两列同时排序的方法...
excel中两列数据怎么一起排序?excel两列同时排序的方法 腾讯视频/爱奇艺/优酷/外卖 充值4折起 我们在使用Excel对数列排序时,有时会碰到需要对两列数据同时排序,下面就跟大家详细介绍操作方 ...
- Python语言学习:利用pandas对两列字段元素求差集(对比两列字段所有元素的异同)
Python语言学习:利用pandas对两列字段元素求差集(对比两列字段所有元素的异同) 目录 利用pandas对两列字段元素求差集(对比两列字段所有元素的异同) 输出结果 实现代码 利用pandas ...
- 用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
- 表头样式_1分钟学会制作Word两栏、三栏表头
在做Word表格时,时常需要用到两栏.三栏的表头,一般你是如何操作?今天和大家分享相应的制作技巧. 1.边框法 选中单元格,点击开始--段落--边框--斜下边框即可完成两栏表头的制作. 如何输入表头内 ...
- matlab柱状图 两列,excel中A、B两列数字做柱状图,但是出来两个柱,怎样让A变成横座标?...
excel中A.B两列数字做柱状图,但是出来两个柱,怎样让A变成横座标?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! ...
- excel相乘再相加_(excel 两列相乘再相加)excel表格两列数据乘积
Excel求两列的乘积用什么公式啊 1.Excel 2016电子表格应用程序,所示点击屏幕右侧新建空作簿: 2.选中销售额单元格数域,如图所示.选择"公式→函数库"功能区,点击&q ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- HTML模板布局页面教程,css网页布局教程 标签 HTML Nav CSS布局教程
短视频,自媒体,达人种草一站服务 大家好,我是毛仔,从今天开始毛仔和大家一起学习div+css页面布局. 从2008年7月份开始,毛仔辞去了原来的工作,和老兄一起网络创业.在那半年时间里学习了不少东西 ...
- html中两个标签上对齐,css将两个元素水平对齐的方法(兼容IE8)
css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的,最常用的最简单方式就是上 ...
最新文章
- Ubuntu里面一些权限问题
- python数据科学和机器学习常用库的官方文档
- UVA 311 Packets
- 远程登录linux服务器的方式(telnet,ssh,ftp)
- 【Visual Studio 2019】上传代码到 GitHub ( 16.9.2 版本 | 安装 GitHub 扩展插件 | 创建 Git 仓库 | 推送到远程仓库 )
- XML学习(二)————属性还是标签?
- java8的stream流操作的数据结构
- 五子棋聊天java_java带聊天的五子棋 适合新手
- 醉上清新年中工作总结汇报模板免费下载_PPTX图片设计素材_包图网888pic.com
- windows内核开发笔记十一:IRQL级别调用说明
- P5713 【深基3.例5】洛谷团队系统
- 蓝桥杯总结及经验教训
- Enolsoft PDF Converter with OCR mac(带有OCR的PDF转换器)
- 【Mysql系列】如何实现王者荣耀排名
- Python 基础|while 循环语句
- H5架设新手小白搭建教程(适用于新手)
- 计算机与软件工程-研究生复试-专业面试题型举例
- ESP8266 带 BMP 180 刷 ESPEasy 通过MOTT协议连接 docker 里的 domoticz 查看气温 气压 监控结果
- 财神来了 | 存量资金博弈下,是谁在吸血
- iphone html5音乐播放器,从界面到功能 五款iPhone音乐播放器年度横评