<!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. iOS_20_微博自己定义可动画切换的导航控制器

    终于效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill/ ...

  2. YTU 2697: 血型统计

    2697: 血型统计 时间限制: 1 Sec  内存限制: 128 MB 提交: 405  解决: 164 题目描述 黑猫警长在犯罪现场发现了一些血迹,现已经委托检验机构确定了血型,需要统计各种血型的 ...

  3. [翻译]NUnit--前言(一)

    前言: 翻译这个系列主要是自己在学习NUnit之时看英文文档大部分能看懂但是有些还是功底不足,所以在方便自己以后再学习的时候可以快速查找,也能够加深印象以及掌握的更好.同时在搜索网上关于NUnit系列 ...

  4. golang中管道热替换

    golang中管道替换问题 https://blog.csdn.net/cyk2396/article/details/78875347 1.运行以下代码: var chan1 chan int va ...

  5. [Codeforces Education Round 6E] New Year Tree

    [题目链接] https://codeforces.com/contest/620/problem/E [算法] 显然 , 一棵子树的DFS序必然为连续的一段 用线段树维护颜色数即可 [代码] #in ...

  6. JSP-Runoob：JSP 结构

    ylbtech-JSP-Runoob:JSP 结构 1.返回顶部 1. JSP 结构 网络服务器需要一个 JSP 引擎,也就是一个容器来处理 JSP 页面.容器负责截获对 JSP 页面的请求.本教程使 ...

  7. bzoj 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富【记忆化搜索+剪枝】

    c[x][y]为从(x,y)到(n,m)的最大值,记忆化一下 有个剪枝是因为y只能+1所以当n-x>m-y时就算x也一直+1也是走不到(n,m)的,直接返回0即可 #include<ios ...

  8. PowerDesigner 的使用教程

    PowerDesigner 的使用这两篇博客挺好,我也是跟着学习,就不再写了: 初步学习: http://www.cnblogs.com/huangcong/archive/2010/06/14/17 ...

  9. 基于Web的Kafka管理器工具之Kafka-manager启动时出现Exception in thread "main" java.lang.UnsupportedClassVersionError错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)   问题详情 我在Kaf ...

  10. SQL远程连接

    一.添加远程连接EXEC sp_addlinkedserver @server = '254', @srvproduct = '',--链接服务器的 OLE DB 数据源的产品名称    @provi ...