需求：高度已知为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. SpringBoot----跨域配置

    前言: 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时,一个资源会发起一个跨域HTTP请求(Cross-site HTTP request).比如说,域名A ( http://dom ...

  2. SpringBoot(3) 文件上传和访问

    springboot文件上传 MultipartFile file,源自SpringMVC MultipartFile 对象的transferTo方法,用于文件保存(效率和操作比原先用FileOutS ...

  3. Scala字符串与容器

    String 前文已经说明了字符串的声明方式: var s = "Hello World"; var s: String = "Hello World"; 在 ...

  4. [java]我的数据在哪里？——数据的内存模型

    在编写程序时,我们也许会有这样一个问题,我们编写的程序中的数据运行时,会保存在哪里呢?简单直接的回答可能是——内存.这个回答在多数情况下可能都是对的,但事实上并不准确,我们都知道内存,即随机访问存储器 ...

  5. [转]angular2在运行ng serve的时候卡在95% emitting LicenseWebpackPlugin

    本文转自:https://blog.csdn.net/qq919694688/article/details/80912207 放弃使用cnpm,使用yarn 1.删除node_modules (不需 ...

  6. 自定义滚动条mCustomScrollbar

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  7. 【Core】在mvc使用EF

    引用DLL: 继续上一篇的内容我们来添加EF实体: 首先:工具> NuGet程序包管理器>程序包管理器控制台: Install-Package Microsoft.EntityFramew ...

  8. 乐字节-Java8新特性之Base64和重复注解与类型注解

    上一篇小乐给大家说了<乐字节-Java8新特性之Date API>,接下来小乐继续给大家说一说Java8新特性之Base64和重复注解与类型注解. 一.Base64 在Java 8中,内置 ...

  9. Java基础——正则表达式

    一.什么是正则表达式 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表通常被用来检索.替换那些符 ...

  10. 【Spring】23、ApplicationContext ，ApplicationContextAware，Listener，Event 的关系解读

    tomcat容器启动流程 启动tomcat容器,加载web.xml,建立整个容器(Servlet容器,这里是tomcat吧)的上下文,ServletContext,这时web.xml有个监听器,就是C ...