需求：高度已知为200px，写出三栏布局，左栏和右栏各位200px，中间自适应，如下图所示：

方法一：float浮动布局

原理是：定义三个区块，需要注意的是中间的区块放在右边区块的下面，统一设置高度为200px，然后设置左边栏宽度为200px并且float:left，设置右边栏宽度为200px并且float:right

优点：兼容性比较好

缺点：float会脱离文档流，需要处理float周边的元素比如清除浮动

浮动布局的原理：查看浮动布局详解

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout article div{

        min-height: 200px;

    }

    .left{

        width: 200px;

        float: left;

        background-color: red;

    }

    .right{

        width: 200px;

        float: right;

        background-color: blue;

    }

    .center{

        background-color: green;

    }

</style>

<body>

    <section class="layout float">

        <article class="left-right-center">

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

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

            <div class="center">浮动解决方案</div>

        </article>

    </section>

</body>

效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化

当center这个元素里面的内容超过设置的这个高度，会出现如下这样的问题

解决办法可以在center中添加一个属性：overflow: hidden;后效果如下：

所以当高度不确定的时候，这种布局方式不适用，左右两边的高度不会跟着变动

方法二：绝对定位布局

实现原理：设置三个区块分别左中右，并且统一设置高度为200px和绝对定位，左边栏left:0，右边栏right:0,最重要的是中间的区块，不设置宽度，并且设置left:200px,right:200px，这个定位的数值也就是左边栏和右边栏的宽度大小

优点：快捷，不容易出问题

缺点：定位会脱离文档流，那么后面的元素也都是要脱离文档流的，这个方式的可使用性比较差

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout article div{

        min-height: 200px;

        position: absolute;

    }

    .left{

        width: 200px;

        left: 0;

        background-color: red;

    }

    .right{

        right: 0;

        width: 200px;

        background-color: blue;

    }

    .center{

        background-color: green;

        left: 200px;

        right: 200px;

    }

</style>

<body>

    <section class="layout absolute">

        <article class="left-right-center">

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

            <div class="center">绝对定位解决方案</div>

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

        </article>

    </section>

</body>

</html>

效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化

方法三：flexbox布局方式

实现原理：首先定义三个区块，分别为左中右，并且统一设置高度为200px，然后在这三个区块的父元素中设置display:flex，设置左边栏和右边栏宽度为200px,中间区块设置flex:1

优点：比较完美的一种方式，在移动端基本都是使用这个布局方式，这是css3中的新的布局方式，当设置最小高度后，中间区块内容溢出时高度会自动撑开，左右两边的高度也可以跟着撑开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout.flexbox article div{

        min-height: 200px;

    }

    .layout.flexbox .left-right-center{

        display: flex;

    }

    .left{

        width: 200px;

        background-color: red;

    }

    .right{

        width: 200px;

        background-color: blue;

    }

    .center{

        background-color: green;

        flex: 1;

    }

</style>

<body>

    <section class="layout flexbox">

        <article class="left-right-center">

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

            <div class="center">flexbox解决方案</div>

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

        </article>

    </section>

</body>

</html>

效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化

方法四：表格布局方式

实现原理：定义三个区块，并且统一设置高度为200px和display:table-cell，然后左边栏和右边栏宽带设置为200px,中间区块不设置宽度，最后需要在这三个区块的父元素上设置width:100%和display:table

优点：兼容性非常好，在IE8也是可以的，弥补flexbox布局在IE8下的不支持

缺点：当某个区块高度不足的时候（固定高度），其他区块也跟着需要调整高度，但有这种需求就是其他区块不想跟着调整高度，这就是这个布局的缺点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout.table article div{

        display: table-cell;

        height: 200px;

    }

    .layout.table .left-right-center{

        display: table;

        width: 100%;

    }

    .left{

        width: 200px;

        background-color: red;

    }

    .right{

        width: 200px;

        background-color: blue;

    }

    .center{

        background-color: green;

    }

</style>

<body>

    <section class="layout table">

        <article class="left-right-center">

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

            <div class="center">表格布局解决方案</div>

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

        </article>

    </section>

</body>

</html>

方法五：网格布局

实现原理：定义三个区块分别为左边栏，中间区块，右边栏，然后再父元素上设置display:grid，grid-template-rows: 200px;（设置格子的高度），grid-template-columns: 200px auto 200px;（这里表示有三列，第一列和第三列的宽度为200px，第二列自动）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout.grid .left-right-center{

        width:100%;

        display: grid;

        grid-template-rows: 200px;

        grid-template-columns: 200px auto 200px;

    }

    .left{

        background-color: red;

    }

    .right{

        background-color: blue;

    }

    .center{

        background-color: green;

    }

</style>

<body>

    <section class="layout grid">

        <article class="left-right-center">

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

            <div class="center">网格布局解决方案</div>

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

        </article>

    </section>

</body>

</html>

效果如下：效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化

需求：如果高度不确定，那么上述的布局方式哪个还可以适用

flexbox布局和table布局是可以通用的，会自动增加高度（三个区块都会自动增加高度）

网格布局：高度不会自动增加，里面的内容会溢出，但可以不设置grid-template-rows: 200px;这个属性的话，三列都会随着内容而增高，并且可以设置三个区块的最小高度

<style>

    html *{

        padding: 0;

        margin: 0;

    }

    .layout.grid .left-right-center{

        width:100%;

        display: grid;

        min-height: 100px;

        grid-template-columns: 200px auto 200px;

    }

    .left{

        background-color: red;

    }

    .right{

        background-color: blue;

    }

    .center{

        background-color: green;

    }

</style>

<body>

    <section class="layout grid">

        <article class="left-right-center">

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

            <div class="center">

                <p>flexbox解决方案</p>

                <p>flexbox解决方案</p>

                <p>flexbox解决方案</p>

            </div>

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

        </article>

    </section>

</body>

浮动布局：会出现下面这种情况

因为浮动的原理，中间区块的内容被区块1挡住了，当内容超出以后，没有了遮挡物，所以就出现了这种情况，解决这种问题需要使用BFC（查看盒子模型和弹性盒子模型的详解）

绝对定位：比如讲center里的内容增加，超过高度后这个区块自动增加，但是其他区块是不会自动增加的

布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应的更多相关文章

  1. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

  3. 前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  4. Java集合-5. （List）已知有一个Worker 类如下： 完成下面的要求 1) 创建一个List，在List 中增加三个工人，基本信息如下： 姓名 年龄 工资 zhang3 18 3000 li4 25 3500 wang5 22 3200 2) 在li4 之前插入一个工人，信息为：姓名：zhao6，年龄：24，工资3300 3) 删除wang5 的信息 4) 利用for 循

    第六题 5. (List)已知有一个Worker 类如下: public class Worker { private int age; private String name; private do ...

  5. 已知圆上三个点坐标，求圆半径 r 和 圆心坐标

    问题: 已知圆上三个点坐标分别为(x1,y1).(x2,y2).(x3,y3) 求圆半径R和圆心坐标(X,Y) X,Y,R为未知数,x1,y1,x2,y2,x3,y3为常数 则由圆公式:(x1-X)² ...

  6. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

  7. Matlab 将两个图像进行分离 已知其中一个图像

    5.下图(a)是一幅两个灰度图像合成的图像,已知其中一幅图像如图(b)所示,试把另一幅图像提取出来,并显示. 运用减法做 %加载入要处理的图片 A=imread('a.png'); %将I变为[0,1 ...

  8. 假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS设计一个三列布局的页面

    探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...

随机推荐

  1. 自己动手实现java数据结构（七） AVL树

    1.AVL树介绍 前面我们已经介绍了二叉搜索树.普通的二叉搜索树在插入.删除数据时可能使得全树的数据分布不平衡,退化,导致二叉搜索树最关键的查询效率急剧降低.这也引出了平衡二叉搜索树的概念,平衡二叉搜 ...

  2. Tensorflow学习笔记(2)：tf.nn.dropout 与 tf.layers.dropout

    A quick glance through tensorflow/python/layers/core.py and tensorflow/python/ops/nn_ops.pyreveals t ...

  3. PHP 正则表达式资料

    正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 举例来说,正则表达式的一个 ...

  4. 按值传递 vs. 按指针传递

    按值传递还是指针传递? 变量赋值有两种方式:按值传递.按"指针"传递(指针也常称为"引用").不同的编程语言赋值的方式不一样,例如Python是按"指 ...

  5. String，StringBuilder， StringBuffer

    String:适用于少量的字符串操作的情况 StringBuilder:适用于单线程下在字符缓冲区进行大量操作的情况 StringBuffer:适用多线程下在字符缓冲区进行大量操作的情况

  6. Jetbrains软件永久破解

    说明:该破解到期时间为2099年,基本为永久破解! 1.点击右侧链接下载脚本JetbrainsCrack-3.1-release-enc.jar [JetbrainsCrack-release-enc ...

  7. spark基本概念及入门

    spark spark背景 什么是spark Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校AMPLab,2010年开源,2013年6月成为Apache孵化项目 ...

  8. 140 - The 12th Zhejiang Provincial Collegiate Programming Contest（第二部分）

    Floor Function Time Limit: 10 Seconds      Memory Limit: 65536 KB a, b, c and d are all positive int ...

  9. javascript基础知识学习

    javascript中几种基础函数的介绍 1.typeof 注意: ① typeof 是操作符,不是函数: ② typeof 操作符 接收一个参数,用来判断参数数据类型,存在六种返回值类型,非别是:u ...

  10. Arrow模块生成时间

    import arrow def isLeapYear(years): ''' 通过判断闰年,获取年份years下一年的总天数 :param years: 年份,int :return:days_su ...