摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局
设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果：
See the Pen QwRzqL by superlin (@superlin) on CodePen.
基础样式我就不说明了，可以看源码，这里只看重要代码。
自身浮动先看html代码，结果比较简单：
html
这种方法比较简单，左右定宽度分别进行左浮动和右浮动，此时主内容列主会自动插入到左右两列的中间，设定左右margin为两边边栏的宽度即可：
css.self-float .left{
float: left;
}
.self-float .right{
float: right;
}
.self-float .main{
margin: 0 100px;
}
绝对定位
html代码结构和前一种方法类似：
html
这种方法比较直观，容易理解：左右两栏采用绝对定位，固定于页面的左右两侧，主内容列用左右margin值撑开距离。
css.absolute-pos {
position: relative;
}
.absolute-pos .left{
position: absolute;
left: 0;
top: 0;
}
.absolute-pos .right{
position: absolute;
right: 0;
top: 0;
}
.absolute-pos .main{
margin: 0 100px;
}
margin负值
这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，中间的主体要使用双层标签，先看代码。
html
外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右100像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即100px，这样正好填补了右边。
css.margin-negative .main{
width: 100%;
float: left;
}
.margin-negative .main .content {
margin: 0 100px;
}
.margin-negative .left {
float: left;
margin-left: -100%;
}
.margin-negative .right {
float: left;
margin-left: -100px;
}
flex布局
结果依然后前两种相似，代码如下。
html
这种实现特别简单，外层div被设定为伸缩布局，内层左右边栏宽度固定位100像素，而中间内容区main空间分配比例为1，即将剩余空间按1:1全部分配给main，这样才实现了中间的宽度的自适应。
css.flex-container{
display: -webkit-flex;
display: flex;
}
.flex-container .main{
-webkit-flex: 1;
flex: 1;
}
如果你还有好的方法，请一定给我留言哦
欢迎光临小弟博客：Superlin"s Blog
我的博客原文：4种方法实现边栏固定中间自适应的3栏布局
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49589.html
摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...
摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。 今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧： 左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...
摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...
摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应， 下边是我看过网上的视频后写出来的三栏布局-左右宽...
阅读 3661·2021-09-22 10:52
阅读 1641·2021-09-09 09:34
阅读 2046·2021-09-09 09:33
阅读 807·2019-08-30 15:54
阅读 2784·2019-08-29 11:15
阅读 773·2019-08-26 13:37
阅读 1729·2019-08-26 12:11
阅读 3027·2019-08-26 12:00
