绝对定位

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. 使用rewrite 让php 实现类似asp.net 的IHttpModule 进行带参数js文件的参数获取

    asp.net 的IHttpModule 接口具有很大的作用,我们可以使用实现的模块进行全局的控制,但是在学习php 的过程中也想实现类似的功能,查找php 的文档,自己没有找到, 但是我们大家应该知 ...

  2. 【转】每天一个linux命令(34):du 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/10/2810755.html Linux du命令也是查看使用空间的,但是与df命令不同的是Lin ...

  3. Centos 6.5 yum 安装Apache软件

    首先在系统上面查询一下是否已经安装了apache 软件[Apache软件在linux系统里的名字是httpd] rpm    -qa    httpd 如果有返回的信息,则会显示已经安装的软件.如果没 ...

  4. go test 初始化--- TestMain的使用

    go test 功能,提高了开发和测试的效率. 有时会遇到这样的场景: 进行测试之前需要初始化操作(例如打开连接),测试结束后,需要做清理工作(例如关闭连接)等等.这个时候就可以使用TestMain( ...

  5. WinRAR打包时不包含文件夹本身,只打包文件夹里的文件和目录

    加上-ep1 参数即可. rar u -m3 -s -r -o+ -ep1 -x*.zip client_zmv9.zip ".\client_zmv9\*"

  6. Bluez相关的各种tools的使用

    7.1        Bccmd Bccmd是用来和CSR的芯片进行BCCMD(Bluecore command protocol)通讯的一个工具.BCCMD并非蓝牙协议栈的标准,而是CSR芯片的专属 ...

  7. 开始转型学习java

    什么编程语言这些都是一样的,编程思想都是一样的.只不过是表现形式. 标识符 每一个字符在ascll码表例都有对应的数字 所以字符和数字是可以相加的   'a'+1 也可以显示数字对应的字符   (ch ...

  8. Sigar简介

    大家好,我是Sigar.也许好多人还不认识我.下面就介绍一下我自己,好让大家对我有一个大致的了解. 我的全名是System Information Gatherer And Reporter,中文名是 ...

  9. SpringMVC的注解方式配置

    SpringMVC支持使用注解方式配置,比配置文件方式更加灵活易用,是SpringMVC使用的主流模式. 1.在配置文件中开启SpringMVC的注解 <!-- 开启包扫描 --> < ...

  10. Java-Web中访问某个指定工程中的文件,报错后发现访问的文件是另一个工程里面的文件

    问题: 浏览器向我的bingou项目中的UserDaoImpl.java发送请求, myeclipse报错:空指针异常 点击报错行之后,错误给定位到了另一个项目中的的一个文件 解决: 原因是文件名错误 ...