需求：高度已知为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. php扩展编译方法

    linux下php已经编译,如何再为php增加新的扩展通过php自带的phpize,如我的phpize在/usr/local/php/bin/phpize1.到软件的官方或pecl.php.net去下 ...

  2. 深度学习之PyTorch实战（1）——基础学习及搭建环境

    最近在学习PyTorch框架,买了一本<深度学习之PyTorch实战计算机视觉>,从学习开始,小编会整理学习笔记,并博客记录,希望自己好好学完这本书,最后能熟练应用此框架. PyTorch ...

  3. 浅析JavaScript正则表达式

    1.正则表达式的定义 正则表达式是一个描述字符模式的对象.JavaScript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式匹配和文本检索与替 ...

  4. Shell 示例：将指定的文件内容转换为大写

    程序代码如下: #!/bin/bash # 将一个指定的输入文件内容转换为大写 E_FILE_ACCESS=70 E_WRONG_ARGS=71 if [ ! -r "$1" ] ...

  5. Layui上传图片 带接口

    layui.use('upload', function () { var upload = layui.upload; upload.render({ elem: '#LAY_avatarUploa ...

  6. 将不确定变为确定~老赵写的CodeTimer是代码性能测试的利器

    首先,非常感谢赵老大的CodeTimer,它让我们更好的了解到代码执行的性能,从而可以让我们从性能的角度来考虑问题,有些东西可能我们认为是这样的,但经理测试并非如何,这正应了我之前的那名话:“机器最能 ...

  7. EF select 匿名类 问题

    连续两次被相同问题困扰. 一.举例 var query=db.StudentScore.Where(r=> r.SubjectId==subjectId).Select(g=>new {S ...

  8. idea/ecipse中使用maven集成springmvc相关jar包时候，出错：java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

    参考stackoverflow:https://stackoverflow.com/questions/11227395/java-lang-classnotfoundexception-org-sp ...

  9. 【Java基础】11、java方法中只有值传递，没有引用传递

    public class Example { String testString = new String("good"); char[] testCharArray = {'a' ...

  10. Windows 10 将MySQL5.5升级为MySQL5.7

    最近想学习一下java.找到一个开源项目需要mysql5.7.11+ 升级 电脑上装的是MySQL 5.5,准备直接升级到最新版本的5.7,对于MySQL好像并没有直接升级到最新版本的功能,下载了Wi ...