-
2020-08-30 19:15:57
三栏布局
三栏布局 在网页布局中算是 比较长江的一种,比如淘宝等,诸多网站都是用的三栏布局
它是 两边元素固定,中间自适应,并且 中间的元素优先渲染第一种:定位
也是比较粗暴的一种 定位 但本人不建议使用 布局容易混乱第二种:浮动
结构 <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) ,但兼容性不好 不推荐使用就不说了 个人建议用圣杯布局
更多相关内容 -
分三栏栏宽相等 如何将合并的一段分为等宽三栏,栏宽为4.5厘米
2021-06-14 01:42:59在弹出的分栏设置界面中,选择“三栏”,并勾寻分隔栏”,然后点击下面的“确定”即可。将全文分为三栏,第一栏栏宽8字符,第二栏栏宽10字...具体一些 将每一步都写清楚 多谢格式菜单分栏选择“三栏”;在“分隔线”...将正文的最后一段分成等宽的三栏,栏间加分隔线。将正文的最后一段分成等宽的三栏,栏间加分隔线。 方法步骤如下:
打开需要操作的WORD文档,选中正文最后一段,点击页面布局中的“更多分栏”。
在弹出的分栏设置界面中,选择“三栏”,并勾寻分隔栏”,然后点击下面的“确定”即可。
将全文分为三栏,第一栏栏宽8字符,第二栏栏宽10字...具体一些 将每一步都写清楚 多谢格式菜单分栏选择“三栏”;
在“分隔线”前的方框里点一下,呈选中状态,即里面有个勾;
在“栏宽相等”前的方框里点一下,去掉里面的勾;
分别设置第一栏、第二栏、第三栏的宽度;
如何将合并的一段分为等宽三栏,栏宽为4.5厘米
首先打开需要编辑的Word文档,选中要分栏的文字。
然后点击打开页面布局中的“分栏”,选择最底部的“更多分栏”。
如何在word上将段落分为等宽三栏,栏宽为3.45厘米就是插入分节符,然后设置分栏为3栏,然后再调整栏宽即可 如果搞不定的话,私信我吧。
word栏宽相等怎么设置word栏宽相等怎么设置
以word2007为例,打开文档,依次选择:页面布局-分栏-更多分栏-选择栏数-勾寻栏宽相等”-确定。
怎么将整个文档设置成宽度相等的三栏
选中全文,点击格式,将下箭头点开,找到分栏,再具体选择三栏,就可以了。
WORD中如何对两段文字内容分两栏排版,栏宽相等,格式\分栏 选2栏,下面的“栏宽相等”前的勾去掉,“间距”改成“2” 右面的“分隔线”前打上勾 就设置完成了
工具:wps文字 分等宽三栏方法: 点击格式里面的分栏,选择三栏,把栏宽相等打上勾。
Word 将正文最后一段设置为等宽两栏,栏间添加分隔Word 将正文最后一段设置为等宽两栏,栏间添加分隔线。具体步骤如下:
点击菜单栏“页面布局”,接着点击“分栏”,在弹出的下拉列表中点击“更多分栏”按
怎样将整个文档分为宽度相等的三栏
怎样将整个文档分为宽度相等的三栏 188***1830 2018-12-01 | 浏览7 次 软件 |举报 您的回答被喜欢后将获得: 系统奖励15(财富值+成长值)+难题奖励20(财
-
CSS实现三栏布局的四种方法示例
2020-09-24 20:50:37可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间一部分做自适应的一种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看... -
三栏式布局详解(代码+图解)
2019-09-02 17:17:28三栏式布局 三栏式布局就是两边固定,中间自适应。 三栏式布局实现方法有很多,包括: 流体布局 BFC三栏布局 双飞翼布局 圣杯布局 Flex布局 Table布局 绝对定位布局 网格布局 流体布局 左侧向左浮动、右侧向右...三栏式布局
三栏式布局就是两边固定,中间自适应。
三栏式布局实现方法有很多,包括:- 流体布局
- BFC三栏布局
- 双飞翼布局
- 圣杯布局
- Flex布局
- Table布局
- 绝对定位布局
- 网格布局
流体布局
左侧向左浮动、右侧向右浮动,最后渲染中间实现;最后渲染中间也就意味着在html中内容div写在最后,并设置中间模块的 margin 值使中间模块宽度自适应
缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验<div class="wrap"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="main">中间</div> </div>
<style> *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } .main{ height: 500px; background-color: aqua; margin-left: -100px; margin-right: -200px; } </style>
效果:
BFC布局
BFC 区域,不会与浮动元素重叠。左右模块各自向左右浮动,并设置中间模块的
overflow:hidden
,使中间模块宽度自适应<style> *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .main{ height: 500px; background-color: aqua; overflow: hidden; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } </style>
双飞翼布局
按照“中左右”的顺序排放元素,都设置浮动,最中间元素宽度设置为100%,
利用左右margin负边距将左右元素拉到左右位置利用的是浮动元素和 margin 负值(中间设置子元素,margin的左右值是左右两边元素的宽度),主体内容可以优先加载,HTML 代码结构稍微复杂点。
<div class="wrap"> <div class="center"> <div class="center-child">中间mmmmmmmmmm</div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div>
<style> .wrap{ border: 1px solid #000; overflow: hidden; } .center{ width:100%; height:500px; background-color: yellow; float: left; } .center-child{ width:100%; height: 400px; background-color: aqua; //为子元素设置左右margin,防止内容被遮挡 margin-left: 150px; margin-right: 250px; } .left{ width:150px; height:500px; background-color: red; float: left; margin-left: -100%; } .right{ width:250px; height:500px; background-color: blue; float: left; margin-left:-250px; } </style>
效果:
圣杯布局
按照“中左右”的顺序排放元素,都设置浮动,最中间元素宽度设置为100%,
利用左右margin负边距将左右元素拉到左右位置圣杯布局使用padding和定位(父元素设置左右padding,再给左右元素设置相对定位)
<div class="wrap"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div>
<style> .wrap{ border:1px red solid; padding:0 250px 0 200px; } .wrap>div{ float: left; height:300px; } .wrap:after{ display:block; content: ""; clear:both; } .center{ width:100%; background-color:yellow; } .left{ width:200px; background-color:blue; margin-left:-100%; position:relative; left:-200px; } .right{ width:250px; background-color:green; margin-left:-250px; position:relative; right:-250px; } </style>
效果:
Flex布局
给父元素设置
display: flex;justify-content: space-around
即可,代码简单方便<div class="wrap"> <div class="left">左侧</div> <div class="center">中间</div> <div class="right">右侧</div> </div>
<style> .wrap{ display: flex; justify-content: space-around; } .left{ width:200px; height:500px; background-color: blue; } .center{ width:100%; height:500px; background-color: yellow; } .right{ width:100px; height:500px; background-color: pink; } </style>
效果:
最后,要注意区分圣杯布局和双飞翼布局哦1 -
excel三栏斜线表头的完美制作方法
2021-06-12 17:58:18在Excel中制作三栏斜线表头的方法有很多,今天介绍一种认为最完美最简单的制作excel三栏斜线表头的方法。请看本文教程:excel三栏斜线表头的完美制作方法。操作步骤:步骤一:边框线的添加。边框线的添加别无选择,...在Excel中制作三栏斜线表头的方法有很多,今天介绍一种认为最完美最简单的制作excel三栏斜线表头的方法。请看本文教程:excel三栏斜线表头的完美制作方法。
操作步骤:
步骤一:边框线的添加。边框线的添加别无选择,就使用单元格的边线即可。如下图所示。
步骤二:添加斜线。
1、Excel2003版:工具栏右键菜单(或视图 - 工具栏) - 绘图- 点直线图标,在excel中拖画出斜线。
2、Excel2007和Excel2010版:插入- 形状 - 点直线图标,在Excel中拖画出斜线。
步骤三:添加文字。之所以称本方法完美,全在于可以完美的放置文字。其他方法有单元格输入换行法,有文本框中添加文字法。但都没有本方法简单实用。
1、Excel2003版,工具栏右键菜单(或视图 - 工具栏) - 窗体 -在窗体中点Aa(标签) - 拖画出标签 - 修改成需要的文字。
2、Excel2007和Excel10版,开发工具 - 插入 - 在点Aa(标签) - 拖画出标签 - 修改成需要的文字。如下图所示。
附:如果你Excel没开发工具选项卡,Excel2007中 左上office按钮 - excel选项 - 在选项窗口中一眼就看到 显示“开发工具”选项卡;Excel2010中,文件 - 选项 - 自定义功能区 - 右侧列表中选中 “开发工具”。
最终设置的效果如下图所示。
补充:大家以后在学习VBA时要打开“开发工具”选项卡,要记住是如何添加的。
更多相关阅读
-
Word2021如何分两栏,三栏,多栏技巧.docx
2021-09-27 04:24:50Word2021如何分两栏,三栏,多栏技巧.docx -
Word2021如何分两栏、三栏、多栏技巧.docx
2021-09-27 04:24:49Word2021如何分两栏、三栏、多栏技巧.docx -
七种方式实现三栏布局
2022-04-05 15:55:43三样布局:两边固定,中间自适应 一.流体布局(float布局) 1.首先绘制左右两栏,左栏左浮动,右栏右浮动 2.再绘制中间一栏,留出左右两栏距离与间距 <style> .container { border: 1px solid red; } ... -
bootstrap 3-三栏简介布局
2017-01-25 16:30:14三栏布局 1、栅格系统布局 一个典型的栅格系统布局 .col-md-4 .col-md-4 .col-md-4 效果如下: a)行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中 b)使用.col-md-*栅格类... -
Html+Css实现三栏布局响应式
2016-12-09 21:51:03<!DOCTYPE html> 宽度自适应布局 body,div { margin:0; padding:0; } div { height:500px; color:#F00; } . -
网页三栏布局五种实现方式(左中右)
2020-05-07 14:46:26适用:高度固定 左右宽度固定 中间自适应 <html> <head> <title>三栏布局</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ... -
css布局:table布局、两栏布局、三栏布局
2017-10-06 14:15:51css布局:table布局、两栏布局、三栏布局 -
图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)
2013-06-17 11:30:28float分三栏的具体代码见下面的内容: 三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端... -
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
2021-03-27 10:06:04但是又时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库 一,老规矩,先看效果图 先来给大家分析下原理 二,原理分析 首先来分析下有那... -
实现三栏布局的8种方式
2020-06-12 13:19:47三栏布局:两侧宽度固定,中间宽度自适应的 公共样式: * { padding: 0; margin: 0; height: 100%; } .left { width: 200px; background-color: aqua; } .right { width: 200px; background-color: ... -
word设置一页分两栏的三种方法
2021-06-30 01:14:32我们在阅读报纸的时候,经常看到分栏的现象,这就是通过Word当中的“分栏”功能进行设置的,那么下面就由学习啦小编给大家分享下word设置一页分两栏的技巧,希望能帮助到您。word设置一页分两栏方法一:常规分栏步骤... -
HTML之基本布局设计之三栏式、两栏式设计
2015-11-21 10:27:40本文主要介绍的是如何构建布局,主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素,接...三栏式 HTML代码 <!DOCTYPE html> <title>This is my -
flex实现三栏布局原理
2018-05-16 10:43:50介绍完了三个属性,我们再回过头来看flex实现三栏布局的原理 我们left和right设置了固定的宽度,然后将flex-basis设置为0,使得容器的剩余空间仅为容器总宽度减去left和right的宽度,不减去center本身内容的... -
html--三栏布局(两边固定宽度,中间自适应)
2016-12-06 11:47:54一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin...于是实现了三栏自适应布局。 #left{ width: 180px; height: 100%; background: blue; position: absolute; left: -
左右固定宽,中间自适应(三栏布局)的方法
2020-08-04 15:20:16左右固定宽,中间自适应(三栏布局)五种实现方法简述:定高100px,左右宽度均为200px,中间自适应。1、浮动—floatfloat介绍2、定位—positionposition介绍3、弹性盒子布局—flexposition介绍4、表格布局—table... -
css3弹性盒子flex实现三栏布局
2018-03-07 20:33:33用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会... -
表格excel怎样把一格用斜线分为三格
2021-01-13 15:39:33参考回答:分三个格写。单元格是excel最小的单元,不能被分割。话题:如何把Excel中单元格分为三等分并写上字 问题详情:Excel表格中如何把一单元格分为三等分并各写入标题回答:一般的情况下,是取三个单元格,在三个... -
excel如何在单元格里加上斜线分割内容
2021-03-07 20:16:29在excel制作表格时,有时要把单元格分割成二栏或者是三栏。如下图箭头所指的样式。已懂操作的朋友们会觉得很简单,但对于一些刚学着用excel制作表格的同学来说,也算是比较头痛的。那么,今天给大家分享下操作步骤。... -
div实现页面划分为左,中,右三栏
2019-09-17 10:58:041、实现方法 2、注意的问题 1、实现方法 利用css分栏,一个整体的div id为wrap ,包含三个div,分别代表左栏(wrap-1)、中栏(wrap-m)、右栏(wrap-r) 通过float... -
Word里怎么把一段分成两栏并加分隔
2021-07-27 03:31:20Word 里怎么把一段分成两栏 并加分隔线~!选中该段,格式--分栏--选择2栏,分隔线前打钩。okWord如何将正文第二段分成两栏 栏间距为5个字符 栏间加分隔线选择第二段,单击“格式”菜单--“分栏”,打开“分栏”对话框... -
使用sap BO sap BO报表制作财务三栏明细账
2017-10-31 10:09:272.财务需要根据这些分录明细数据做出传统三栏明细账 3.三栏明细账可以保存电子文件 使用sap BO WEBI功能如下: 1.多个查询联合 2.嵌套查询 3.变量=函数,公式(模型字段重分类,数据多次加工处理),合并字段使用 4... -
flex实现三栏等分布局
2021-06-07 23:06:16flex实现三栏等分布局 前言 在实际开发中,我们经常会想要实现的一种布局方式就是三栏等分布局,那么我们如何来解决这个问题呢? 解决 方法一:flex 外层容器也就是ul设置display:flex,对项目也就是li设置... -
CSS实现比例固定且大小随浏览器窗变化的自适应三栏布局
2017-02-24 10:34:20头行、脚行和中间部分的最小宽度可设,当浏览器视窗宽度大于此值时,按比例增长,中间部分划分为三栏,三栏宽度比例固定,但宽度皆不固定,随览器视窗宽度变化而变化,三栏的高度固定。 2.代码如下: ... -
Html学习之十三(导航栏的制作)
2021-06-09 05:56:15导航效果 首页推荐 新闻头条 电 视 剧 最新电影 小 游 戏 小说大全 旅游度假 结果: 通栏导航栏的制作,综合使用CSS属性,代码不超过30行 这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的... -
CSS手机端顶部标题栏样式(三分天下)
2019-12-30 11:12:00/*顶部标题栏*/ header{ width: 100%; height: 60px; line-height:60px; overflow: hidden; } .title-box { display:flex; background: #3F404F; font-size:14px; padding:0 10px; } .title-left{ text-...