绝对定位

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. Servlet基本操作

    一.Servlet的请求流程 web项目中的web.xml文件配置为: <servlet> <!--别名--> <servlet-name>Hello</se ...

  2. 关于 Javascript 严格模式下多文件合并时注意

    Javascript 在第一行使用 "use strict" 声明严格模式. 但是在多个 js 文件合并时就需要注意了,可能你的是严格模式,但别的文件不是,就会造成错误. 为什么使 ...

  3. 【转】每天一个linux命令(27):linux chmod命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/29/2794010.html chmod命令用于改变linux系统文件或目录的访问权限.用它控制文 ...

  4. mac下hbase安装

    出处:https://www.jianshu.com/p/510e1d599123 安装到的路径:/usr/local/Cellar/hbase/1.2.6 linux操作: linux命令 作用 . ...

  5. php preg_replace空格无法替换问题

    一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...

  6. Microsoft Dynamics CRM 4.0 如何添加自定义按钮

    一.通过导入导出ISV.Config(ISV配置),具体如下图: 先设置—>打开导出自定义项—>选择ISV配置—>选择导出所选自定义项 点击确定 保存到桌面,解压,用VS打开cust ...

  7. 【jmeter】jmeter之“参数化”

    参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统. 这个时候就需要对用户名和密码进 ...

  8. webstorm打开后无法显示文件夹目录

    最近接触webstorm,上午研究怎么删除项目,不小心把项目在目录中删除了,然后重新创建时,无法显示了. 状况类似这样的 百度上搜了一些没搜到,关键字是“webstorm 项目 目录 无法显示文件夹” ...

  9. android webview setcookie 设置cookie

    CookieSyncManager.createInstance(mWebView.getContext()); CookieManager cookieManager = CookieManager ...

  10. 检测2个公网IP的GRE隧道是否通的方法,使用PPTP拨号检测。

    检测2个公网IP的GRE隧道是否通的方法,使用PPTP拨号检测. 因为PPTP是建立在GRE隧道基础上的. PPTP 防火墙开放 TCP 1723防火墙开放 IP protocol 47,即GRENA ...