资讯专栏INFORMATION COLUMN

css常见的各种布局下----三列布局

tigerZH / 2240人阅读

摘要:三列布局,左右固定宽度右边自适应不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局自适应部分一定要放第一个位子,使用浮动,并且设置宽度为,不设置浮动元素内容不够称不开整个宽度左右固定部位,使用负数,使其左右靠齐中间自适应部分嵌套一

css 三列布局,左右固定宽度右边自适应

1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局

1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不够称不开整个宽度

1.1.2 左右固定部位,使用margin-left :负数,使其左右靠齐

1.1.3 中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; .box .box-content { height: 100%; float: left; /* 一定要设置浮动,要不下面的模块上不来 */ width:100%;/* 一定要设置100%,要不内容不够称不开整个页面 */ background-color: blue; /* 默认还是整行 */ .box .box-content .child { margin: 0 210px; /* 中间模块空出左右距离,设置浮动 */ background: red; height: 100%; .box .box-left { width: 200px; float: left; margin-left: -100%; /* 设置浮动, margin-left:-100% 可以使元素往上移一行,并且移动到最左边 */ height: 300px; background-color: green; .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 设置浮动, margin-left:负的自身宽度 可以使元素往上移一行,并且移动到最右边 */ background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div div 中间主题内容 /div /div div 11dsdasdas不你弟弟呢多带带 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body /html

1.2 其实只是简单的中间内容自适应,还可以设置,中间的元素块状元素盒子模型为ie下的盒子模型,

再使用padding也是可以实现的

style .box{ height: 500px; background-color: bisque; position: relative; .box .box-content { box-sizing:border-box; height: 100%; float: left; /* 一定要设置浮动,要不下面的模块上不来 */ width:100%;/* 一定要设置100%,要不内容不够称不开整个页面 */ /* 默认还是整行 */ padding:0 210px; .box .box-content .child { /* 中间模块空出左右距离,设置浮动 */ background-color: blue; height: 100%; .box .box-left { width: 200px; float: left; margin-left: -100%; /* 设置浮动, margin-left:-100% 可以使元素往上移一行,并且移动到最左边 */ height: 300px; background-color: green; .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 设置浮动, margin-left:负的自身宽度 可以使元素往上移一行,并且移动到最右边 */ background-color: pink; header,footer { height: 75px; background-color: aqua; } /style body header /header div div div !-- 这个div只是为了方便看,设置了以下背景色 可用可不用,内容区还是自适应的 -- 中间主题内容 /div /div div 11dsdasdas不你弟弟呢多带带 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body

2,上面其实是圣杯布局,我们再使用中间相对定位,左右两边绝对定位(中间绝对定位,不设置宽度撑不开容器)

其实只要中间的位子对应了,左右两边不管是相对定位,还是绝对定位都可以

 

重点当然还是中间怎么取定位(元素顺序没有关系)

如果中间取相对定位,不设置浮动,设置margin 空出左右距离,

两边取绝对定位,只要设置top:0 一个left:0  一个right:0

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; .box .box-content { position: relative; height: 100%; margin-left: 210px; margin-right: 210px; background-color: blue; .box .box-left { width: 200px; position: absolute; height: 300px; left: 0; top:0; background-color: green; .box .box-right { width: 200px; position: absolute; min-height: 100%; right: 0px; top:0; background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div div 中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺丝钉结案率放假啊了解 /div /div div 11dsdasdas不你弟弟呢多带带 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body /html

3.我们再看下使用定位的双飞燕布局, 双飞燕,要对父容器设置padding ,大小等一左右固定宽度

  左右两边据对定位,就这个和上面的方法差不多,我们一起看看左右两边相对定位

如果左右两边相对定位,设置margin和和left

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; padding: 0 210px; .box .box-content { height: 100%; float: left; background-color: blue; .box .box-left { width: 200px; position: relative; height: 300px; float: left; left: -210px; margin-left: -100%; background-color: green; .box .box-right { width: 200px; position: relative; min-height: 100%; float: left; margin-left: -200px; right: -210px; background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div 够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶 /div div 11dsdasdas不你弟弟呢多带带 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body /html

  4.是用flex实现三列布局,左右固定中间自适应,父元素设置display: flex, 左右分别设置flex: 0 0 200px ,父元素为display:flex

那么子元素的float、clear和vertical-align属性将失效,兼容性有问题,一般都用于移动端

!DOCTYPE html html lang="en" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; display: flex; .box .box-content { flex: 0 1 auto; margin: 0 10px; background-color: blue; .box .box-left { flex: 0 0 200px; background-color: green; .box .box-right { flex: 0 0 200px; background-color: pink; header,footer { height: 75px; background-color: aqua; /style /head body header /header div div 11dsdasdas不你弟弟呢多带带 /div div 解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝 几个垃圾解斯大林经过拉丝几个垃圾解斯大林经 过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body /html

5. 使用grid 布局实现三列布局,也是特别简单,设置父元素为,单行,三列,第一列左边宽度,中间自适应,

右边自适应,当然grid兼容性很大问题

!DOCTYPE html html lang="en" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; display: grid; grid-gap: 10px; grid-template-columns: 200px auto 200px; grid-template-rows: 1fr; .box .box-content { background-color: blue; .box .box-left { flex: 0 0 200px; background-color: green; .box .box-right { flex: 0 0 200px; background-color: pink; header,footer { height: 75px; background-color: aqua; /style /head body header /header div div 11dsdasdas不你弟弟呢多带带 /div div 解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾 /div div 12酷酷酷酷酷的的是计算机技术升级的历史记录 /div /div footer /footer /body /html View Code

三列布局总结

1.不使用浮动的圣杯布局,左中右都设置浮动,中间设置宽度100%,嵌套一层div 使其自元素的内容区

恰好自适应大小,左边右边设置margin-left:-100% 和margin:-右边宽度,

如果不想使用中间嵌套div,则可以设置中间的盒子模型为ie下的盒子模型,然后设置padding的值

中间模块一定要放最前面

2. 使用定位,中间设置margin-left 左边宽度,右边设置margin-right 右边宽度,父元素设置定位

position:relative; 左右两边设置position:absolute,绝对定位,设置 top 0 left 0 ,top 0 right 0

3. 使用定位,中间一样,左右两边设置相对定位,则要设置父元素padding 或者margin 左右宽度

然后和1一样设置,左边右边设置margin-left:-100% 和margin:-右边宽度, 左边再加上left:-宽度

右边设置right:-右边宽度,这个就是经典的双飞翼布局

4.使用弹性盒子布局,记住中间的一定要设置flex: 0 1 auto ,缩小倍数一定要是1,不是1的话盒子会

被子元素字体撑开,一般使用于移动端

5.使用grid,目前应该有很大兼容性问题,了解就行

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

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

相关文章

  • css常见各种布局----三列布局

    css 三列布局,左右固定宽度右边自适应   1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局      1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不够称不开整个宽度      1.1.2 左右固定部位,使用margin-left :负数,使其左右靠齐      1.1.3 中间自适应部分嵌套一个div,设置m...

    番茄西红柿 评论0 收藏0
  • css常见各种布局----三列布局

    摘要:三列布局,左右固定宽度右边自适应不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局自适应部分一定要放第一个位子,使用浮动,并且设置宽度为,不设置浮动元素内容不够称不开整个宽度左右固定部位,使用负数,使其左右靠齐中间自适应部分嵌套一css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使...

    mingde 评论0 收藏0
  • css常见各种布局----三列布局

    摘要:三列布局,左右固定宽度右边自适应不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局自适应部分一定要放第一个位子,使用浮动,并且设置宽度为,不设置浮动元素内容不够称不开整个宽度左右固定部位,使用负数,使其左右靠齐中间自适应部分嵌套一css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使...

    Joonas 评论0 收藏0
  • 前端面试之CSS总结(上)

    摘要:重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上),有许多地方叙述的并不是十分详细,只是大致的描述一下,给自己提供一个知识轮廓。本篇中主要描述...

    琛h。 评论0 收藏0
  • CSS

    摘要:在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素,相对于其正常位置进行定位。双冒号是在当前规范中引入的,用于区分伪类和伪元素。 1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 有两种, IE 盒子模型、W3C 盒子模型; 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);区  别: IE的cont...

    Lyux 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<