css三栏布局：左右固定宽中间自适应

CoorChice 发布于2019-08-30 15:52 / 2565人阅读

摘要：圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法

圣杯布局

直接上代码：
html:

</>复制代码

css:

</>复制代码 
.middle,.left,.right {float: left; position: relative;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; left: -220px;}
.right {margin-left: -220px; width: 220px;right: -220px;}
.container {padding: 0 220px 0 220px}

双飞翼布局

html:

</>复制代码

css:

</>复制代码 
.middle,.left,.right {float: left;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; }
.right {margin-left: -220px; width: 220px;}
.middle-inner {margin-left: 220px;margin-right: 220px;}

自身浮动法

html:

</>复制代码

css:

</>复制代码 
.left,.right,.middle {min-height: 200px}
.left {width: 220px; float: left;  border:1px solid red; } 
.right {width: 160px; float: right;  border:1px solid blue; } 
.middle {margin-left: 250px; margin-right: 180px;  border:1px solid green; }

绝对定位法

html:

</>复制代码

css:

</>复制代码 
.left,.right{position: absolute;top: 0;width: 220px;min-height: 130px}
.left {left: 0;}
.right {right: 0;}
.middle {margin:0 220px 0 220px; min-height: 130px}

GPU云服务器云服务器 css自适应 css图片自适应 asp 自适应css 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116419.html

css三栏布局：左右固定宽中间自适应

摘要：圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法圣杯布局直接上代码：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

Vicky 2019-08-01 16:14 评论0 收藏0
三栏布局（一）-------左右宽高固定，中间自适应

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应，下边是我看过网上的视频后写出来的三栏布局-左右宽...

Aldous 2019-04-23 13:08 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

isaced 2019-08-29 14:21 评论0 收藏0