<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{position:relative;float:left;width:200px;height:500px;background-color:red}
        .middle{float:left;width:100%;margin:0 -200px;height:500px;background-color:#c8dcf2;padding:0 200px;box-sizing: border-box}
        .right{float:left;width:200px;height:500px;background-color:red}
    </style>
</head>
<body>
<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

</body>
</html>

浮动和margin负值 三列布局的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS三列布局

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

  6. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  7. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

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

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

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

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

随机推荐

  1. c# GDI+绘制不同字体的字符串

    一段字符串中可能既有汉字又有字母,对于汉字和字母分别采用不同的字体进行绘制直接po代码了 Bitmap bmp = new Bitmap(iWidth, iHeight); Graphics g = ...

  2. linux redis tmp redis 安装

    Redis https://redis.io/download yum install make gcc gcc-c++ openssl-devel zlib-devel -y; wget tar - ...

  3. YTU 2629: E1 一种颜色，三个分量

    2629: E1 一种颜色,三个分量 时间限制: 1 Sec  内存限制: 128 MB 提交: 300  解决: 226 题目描述 在计算机中,常用三种基色红(R).绿(G).蓝(B)的混合来表示颜 ...

  4. 学习Flash Builder编程的准备工作

    1. 下载教科书,Essential ActionScript 3.0或者Programming ActionScript 3.0.这将是你的很好的老师.英语不灵的买一本中文版本. 2. 安装Flas ...

  5. 美国诚实签经验——中英文行程单、往返机票、用英语面试的申请者通过率>用中文面试的申请者的通过率、一直保持着微笑，看上去很自信，也很诚恳、户口簿带上最好

    在排队等待时据我的观察,用英语面试的申请者通过率>用中文面试的申请者的通过率.一家人申请通过率>单个人通过率:商务签证通过率>旅游签证通过率 一.    面签材料 1.    必备材 ...

  6. 并不对劲的[noi2006]网络收费

    题目略长,就从大视野上复制了. 听上去好像费用流,然而…… ***************************表示略长的题目的分界线************************ 1495: [ ...

  7. uva 12265 贩卖土地

    题目大意: 有一个矩阵 有些点可以取有些不能 求以每个点为右下角的子矩阵(里面点都可以取)的周长最大值 最后统计出每个周长对应矩阵的个数 思路: 单调栈 先预处理出每个点向上最多能延伸多长记为h(i, ...

  8. python-----opencv读取视频、读取图片 显示指定大小并按键实现暂停、播放

    按空格键实现暂停播放,代码如下: cv2.namedWindow("m1", 0) cv2.resizeWindow("m1", 800, 600) cv2.i ...

  9. sqlserver新加一自增长的列,并且更新为行号

    --查询行号 select row_number()over(order by CHECKTIME )as RowNum,*from CHECKINOUT --更新id列为行号 update CHEC ...

  10. sql server 触发器详细应用

    SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用.  Ø 什么是触发 ...