最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。

首先我想到的是float——浮动布局

使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div>

    <div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div>

    <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div>

</body>

</html>

其次我想到了position——定位

使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.left{

     width:200px;

     height:500px;

     position: absolute;

     top:0;

     left:0;

     background:blue;

}

.center{

    margin-left: 200px;

    margin-right: 300px;

    height:500px;

    background-color: green;

}

.right{

width:300px;

height:500px;

position: absolute;;

top:0;

right:0;

background: blue;

}

    </style>

</head>

<body>

    <div class="left">左边</div>

    <div class="center">中间</div>

    <div class="right">右边</div>

</body>

</html>

第三、使用双飞翼布局

使用双飞翼布局与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.middle{

    float: left;

    width: 100%;

    height: 50px;

    background-color: #fff9ca;

}

.middle-wrap{

    margin: 0 200px 0 150px;

}

.left{

    float: left;

    width: 150px;

    height: 50px;

    background-color: red;

    margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/

}

.right{

    float: left;

    width: 200px;

    height: 50px;

    background-color: yellow;

    margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/

}

    </style>

</head>

<body>

    <div class="middle">

        <div class="middle-wrap">middle</div>

    </div>

    <div class="left">left</div>

    <div class="right">right</div>

</body>

</html>

双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.

最后我还想说说CSS3的flex布局方法

该方式的思想是设置一个弹性容器包裹三个元素，并将这个容器设置为水平排列（flex-flow:row）,左右两边元素设置固定宽度，中间元素设置为flex:1;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.flex {

    display: flex;

    flex-flow: row;

}

.left{

    width: 200px;

    height: 50px;

    background-color: red;

}

.center{

    flex: 1;

    height: 50px;

    background-color: #fff9ca;

}

.right {

    width: 300px;

    height: 50px;

    background-color: yellow;

}

    </style>

</head>

<body>

<div class="flex">

    <div class="left">左边</div>

    <div class="center">中间</div>

    <div class="right">右边</div>

</div>

</body>

</html>

但不得不说的是flex布局的兼容性还不够完善，所以个人不推荐使用这种方式布局。

嘿嘿，以上就是我能想到的实现左右固定，中间自适应的三列布局的几种方式啦啦啦

CSS三列布局之左右宽度固定，中间元素自适应问题的更多相关文章

  1. 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

  2. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  3. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  4. css 三列布局

    前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...

  5. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  6. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  7. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  8. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  9. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

随机推荐

  1. border:none和border:0的区别

    C:当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度:  D:定义边框时,除了设置宽度外,还必须设置边框的样式才能显示出来.     border:0;浏 ...

  2. JqGrid 自定义子表格 及 自定义Json 格式数据不展示

    项目第一次使用JqGrid ,发现功能强大,但由于对他不熟悉,也没有少走弯路,记录一下. 1.引用 <link href="~/Scripts/JqGrid/jqgrid/css/ui ...

  3. 95% CI, 置信区间 Confidence Interval

    什么是置信区间 置信区间又称估计区间,是用来估计参数的取值范围的.常见的52%-64%,或8-12,就是置信区间(估计区间).   置信区间的概述 1.对于具有特定的发生概率的随机变量,其特定的价值区 ...

  4. 数据从mysql迁移至oracle时知识点记录（一）

    最近在做数据的迁移,再将数据从mysql迁移至oracle时,部分sql语句进行了修改,在此对部分知识点进行记录: 参考资料:https://dev.mysql.com/doc/refman/5.5/ ...

  5. Codeforces 781B. Innokenty and a Football League

    题目链接:http://codeforces.com/contest/781/problem/B 去tmd 2-SAT 直接贪心就可以过去了,优先选择第二种情况. 然而....可以被叉掉(数据水了) ...

  6. 【BZOJ】1875: [SDOI2009]HH去散步

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1875 注意的是路径不可以重复,所以这题把边看成点.每一条无向边拆成两条有向边. 令${F[ ...

  7. 如何将exe注册为windows服务，直接从后台运行

    方法一:使用windows自带的命令sc 使用sc create 方法创建. 如:注册服务 sc create ResharperServices binpath= D:\ResharperServi ...

  8. linux网络常用命令

    1,显示网桥 brctl show2,显示ip ip a3,查看openvswitch的配置信息 ovs-vsctl show4,显示网络命名空间 ip netns5,显示DHCP信息 ps -ef ...

  9. English trip EM2-LP-6A Teacher:Julia

    课上内容(Lesson) How many children are in the family? there are 16 kids How old is the oldest child? He' ...

  10. 20170912xlVBA批量导入txt文件

    Public Sub BatchImportTextFiles() AppSettings 'On Error GoTo ErrHandler Dim StartTime, UsedTime As V ...