绝对定位

css
html,body{margin: 0px;height:100%;}
div{height: 100%;}
.left,.right {top: 0px;position: absolute;width: 200px;background-color: black;}
.left {left: 0px;}
.right {right: 0px;}
.center {margin: 0px 200px;background-color: red;}
html
<div class='left'></div>
<div class="center"></div>
<div class='right'></div>

浮动

css
html,body{margin: 0px;padding: 0px;height:%;}
div{height:%;}
.left,.right {width: 200px;background-color: black;}
   .left {float: left;}
.right {float:right;}
  .center {margin: 0px 200px;background-color: red;}
html
<div class='left'></div>
<div class='right'></div>
<div class="center"></div>

  

CSS 3栏自适应布局的更多相关文章

  1. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  2. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  3. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  6. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  7. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  8. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  9. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

随机推荐

  1. Tomcat配置JNDI数据源的三种方式-转-http://blog.51cto.com/xficc/1564691

    第一种,单个应用独享数据源 就一步,找到Tomcat的server.xml找到工程的Context节点,添加一个私有数据源 Xml代码   <Context docBase="WebA ...

  2. velocity 知识点

    velocity 教程: http://www.51gjie.com/javaweb/126 velocity 语法 语法 说明 关键字以#开头 定义数组 ['aaa','bbb'] 变量以$开头 把 ...

  3. thrift 知识点

    mac下,thrift 安装 mac下,最简单安装thrift的方法:使用brew安装 brew update brew install thrift 验证安装成功:thrift --help 安装出 ...

  4. bzoj 4025 二分图——线段树分治+LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4025 线段树分治,用 LCT 维护链的长度即可.不过很慢. 正常(更快)的方法应该是线段树分 ...

  5. golang init函数

    init函数有一下几点特性: init函数在main执行之前,自动被调用执行的,不能显示调用 每个包的init函数在包被引用时,自动被调用 每个包可以有多个init函数 同一个文件中可定义多个init ...

  6. web中显示中文名称的图片,可以这样配置filter

    com.cy.filter.UrlFilter: package com.cy.filter; import java.io.IOException; import java.net.URLDecod ...

  7. HUD 2639 Bone Collector II

    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin

    此篇文章原文地址:http://blog.csdn.net/wangsky2/article/details/22961345 正文: 原文地址:http://stackoverflow.com/qu ...

  9. 部署DNS从服务器

    修改主服务器中区域信息文件: # vi /etc/named.rfc1912.zones 检查配置文件是否有错误 # named-checkconf 重启named服务程序,让配置文件生效 #syst ...

  10. 补充 3:Golang 一些特性

    1 丰富的内置类型 2 函数多返回值 3 Go的错误处理 :   Go语言引入了3个关键字用于标准的错误处理流程,这3个关键字分别为defer. panic和 recover 4 在Go语言中,所有的 ...