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 class="box">

        <div class="box-content">

            <div class="child">

                中间主题内容

            </div>

        </div>

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-right">

            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 class="box">

        <div class="box-content">

            <div class="child"><!-- 这个div只是为了方便看，设置了以下背景色 可用可不用，内容区还是自适应的 -->

                中间主题内容

            </div>

        </div>

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-right">

            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 class="box">

        <div class="box-content">

            <div class="child">

                中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解

            </div>

        </div>

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-right">

            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 class="box">

        <div class="box-content">

            够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水
水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

        </div>

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-right">

            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 class="box">

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-content">

            解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝
　　　　　　　　几个垃圾解斯大林经过拉丝几个垃圾解斯大林经
　　　　　　　　过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾

        </div>

        <div class="box-right">

            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 class="box">

        <div class="box-left">

            11dsdasdas不你弟弟呢单独

        </div>

        <div class="box-content">

            解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾

        </div>

        <div class="box-right">

            12酷酷酷酷酷的的是计算机技术升级的历史记录

        </div>

    </div>

    <footer>

    </footer>

</body>

</html>

　　 三列布局总结

　　　　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,目前应该有很大兼容性问题，了解就行

　　　　

css常见的各种布局下----三列布局的更多相关文章

  1. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  2. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

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

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

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

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

  5. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

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

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

  7. 三列布局，读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  8. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  9. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

随机推荐

  1. SpringMVC表当重复提交

    最近公司上线,有同志进行攻击,表当防重复提交也没有弄,交给我 ,本人以前也没弄过,知道大概的思路,但是那样实在是太麻烦了,虽然后面试过使用过滤器加拦截器实现,不过还是有点小麻烦. 后来在网上搜索后发现 ...

  2. MyBatis系列目录--5. MyBatis一级缓存和二级缓存(redis实现)

    转载请注明出处哈:http://carlosfu.iteye.com/blog/2238662 0. 相关知识: 查询缓存:绝大数系统主要是读多写少. 缓存作用:减轻数据库压力,提供访问速度. 1. ...

  3. Linux kernel的中断子系统之（六）：ARM中断处理过程

    返回目录:<ARM-Linux中断系统>. 总结:二中断处理经过两种模式:IRQ模式和SVC模式,这两种模式都有自己的stack,同时涉及到异常向量表中的中断向量. 三ARM处理器在感知到 ...

  4. An annotation based command line parser

    Java命令行选项解析之Commons-CLI & Args4J & JCommander http://rensanning.iteye.com/blog/2161201 JComm ...

  5. java.util.ConcurrentModificationException异常的解决

    问题复现: List<String> list = new ArrayList<>();list.add("11");list.add("55&q ...

  6. 深入理解Java：内省(Introspector)

    深入理解Java:内省(Introspector) 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传 ...

  7. bzoj 4565 状压区间dp

    我还以为我状压很好...... 噗!!! 果然我区间很差... f[i][j][s]表示i~j段,合并后的状态为s所得的最大收益 枚举i,j,k,s. f[i][j][s<<1]=max( ...

  8. Evensgn 剪树枝 树规

    f[x][0]表示与其父边相连的连通块内没有黑苹果的方案数, f[x][1]则表示有黑苹果, 如果父边被切断,相当于没有黑苹果 初始化时,假设切掉父边,f[x][0]=1,f[x][1]=0; 递归回 ...

  9. BZOJ_3110_[Zjoi2013]K大数查询_整体二分+树状数组

    BZOJ_3110_[Zjoi2013]K大数查询_整体二分+树状数组 Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位 ...

  10. BZOJ_3687_简单题_bitset

    BZOJ_3687_简单题_bitset Description 小呆开始研究集合论了,他提出了关于一个数集四个问题: 1．子集的异或和的算术和. 2．子集的异或和的异或和. 3．子集的算术和的算术和 ...