资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/4种方法实现边栏固定中间自适应的3栏布局

4种方法实现边栏固定中间自适应的3栏布局

MoAir / 1930人阅读

摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局

设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果：

See the Pen QwRzqL by superlin (@superlin) on CodePen.

基础样式我就不说明了，可以看源码，这里只看重要代码。

自身浮动

先看html代码，结果比较简单：

</>复制代码 
  1. html
  2.   
  3.   
  4.

这种方法比较简单，左右定宽度分别进行左浮动和右浮动，此时主内容列主会自动插入到左右两列的中间，设定左右margin为两边边栏的宽度即可：

</>复制代码 
  1. css.self-float .left{
  2.   float: left;
  3. }
  4. .self-float .right{
  5.   float: right;
  6. }
  7. .self-float .main{
  8.   margin: 0 100px;
  9. }
绝对定位

html代码结构和前一种方法类似：

</>复制代码 
  1. html
  2.   
  3.   
  4.

这种方法比较直观，容易理解：左右两栏采用绝对定位，固定于页面的左右两侧，主内容列用左右margin值撑开距离。

</>复制代码 
  1. css.absolute-pos {
  2.   position: relative;
  3. }
  4. .absolute-pos .left{
  5.   position: absolute;
  6.   left: 0;
  7.   top: 0;
  8. }
  9. .absolute-pos .right{
  10.   position: absolute;
  11.   right: 0;
  12.   top: 0;
  13. }
  14. .absolute-pos .main{
  15.   margin: 0 100px;
  16. }
margin负值

这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，中间的主体要使用双层标签，先看代码。

</>复制代码 
  1. html
  2.   
  3.     
  4.   
  5.   
  6.

外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右100像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即100px，这样正好填补了右边。

</>复制代码 
  1. css.margin-negative .main{
  2.   width: 100%;
  3.   float: left;
  4. }
  5. .margin-negative .main .content {
  6.   margin: 0 100px;
  7. }
  8. .margin-negative .left {
  9.   float: left;
  10.   margin-left: -100%;
  11. }
  12. .margin-negative .right {
  13.   float: left;
  14.   margin-left: -100px;
  15. }
flex布局

结果依然后前两种相似，代码如下。

</>复制代码 
  1. html
  2.   
  3.   
  4.

这种实现特别简单，外层div被设定为伸缩布局，内层左右边栏宽度固定位100像素，而中间内容区main空间分配比例为1，即将剩余空间按1:1全部分配给main，这样才实现了中间的宽度的自适应。

</>复制代码 
  1. css.flex-container{
  2.   display: -webkit-flex;
  3.   display: flex;
  4. }
  5. .flex-container .main{
  6.   -webkit-flex: 1;
  7.   flex: 1;
  8. }

如果你还有好的方法，请一定给我留言哦

欢迎光临小弟博客：Superlin"s Blog
我的博客原文：4种方法实现边栏固定中间自适应的3栏布局

云服务器 GPU云服务器 自定义布局怎么实现 三种实现方法 自适应阈值的流量算法 html的宽度自适应

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

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

相关文章

  • 4种方法实现边栏固定中间自适应的3栏布局

    摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...

    EddieChan 评论0 收藏0

  • CSS布局——左定宽度右自适应宽度并且等高布局

    摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。 今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧： 左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...

    dreamtecher 评论0 收藏0

  • CSS布局十八般武艺都在这里了

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

    includecmath 评论0 收藏0

  • 三栏布局的n种实现

    摘要：本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。每一种布局都会有个，个人依然认为文章里帖代码并没有来的直接。其中讨论了这么多种种布局，有以下理由是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。 本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。...

    aisuhua 评论0 收藏0

  • 三栏布局（一）-------左右宽高固定，中间自适应

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

    Aldous 评论0 收藏0

发表评论

登陆后可评论

0条评论

MoAir

男|高级讲师
我要私信

TA的文章

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