<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main {
            height: 500px;
            background-color: blue;
            display: flex;
        }
        .left {
            width: 200px;
            height: 500px;
            background-color: blue;
        }
        .middle {
            flex: 1;
            height: 500px;
            background-color: yellow;
        }
        .right {
            width: 200px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

</body>
</html>

flex 三列布局的更多相关文章

  1. flex实现三列布局

    css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...

  2. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  3. CSS三列布局

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

  4. Layout 不可思议（二）—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  5. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  6. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  7. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

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

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

  9. css 三列布局

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

随机推荐

  1. SQLServer2012连接数据库报错

    尝试读取或写入受保护的内存 这通常指示其他内... CMD 输入 netsh winsock reset,重启计算机即可

  2. （三）Java 开发环境配置

    window系统安装java 下载JDK   首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downl ...

  3. ORA-00907: 缺失右括号（通用解决办法）

    PL/SQL 的SQL语句可以执行,但是放在hibernate中,后台打印,出现了错误. 错误的SQL解析:黄色为错误部分 Hibernate:      select         examine ...

  4. 使用 FFmpeg 处理高质量 GIF 图片

    使用 FFmpeg 处理高质量 GIF 图片 - 为程序员服务  http://ju.outofmemory.cn/entry/169845

  5. Android7.0源码编译运行指南【转】

    见连接: http://blog.csdn.net/HardReceiver/article/details/52650303

  6. luogu 2627 修建草坪

    题目大意: 一个数列,取出一些数使得它们的总和最大且没有k个连续 思路: 首先我们可以找到一个nk的dp dp方程:dp[i]=dp[i-1]+sum[i]-sum[j] (sum[j]尽量小) 然后 ...

  7. 【SDOI 2008】 递归数列

    [题目链接] 点击打开链接 [算法] 矩阵乘法优化递推 由于本博客不支持数学公式,所以不能将矩阵画出来,请谅解! [代码] #include<bits/stdc++.h> using na ...

  8. 洛谷P4158 [SCOI2009]粉刷匠

    传送门 设$dp[i][j][k][0/1]$表示在涂点$(i,j)$,涂了$k$次,当前点的颜色是否对,最多能刷对多少个格子 首先换行的时候肯定得多刷一次 然后是如果和前一个格子颜色相同,那么当前点 ...

  9. RaspberryPi cProfile使用

    使用sudo python -m cProfile -o 1.cprof your.py生成cprof文件 windows下安装snakeviz:pip install -i https://pypi ...

  10. [转]URL最大长度问题

    本文转自:http://www.cnblogs.com/henryhappier/archive/2010/10/09/1846554.html 今天在测试Email Ticket的时候发现在进行Ma ...