绝对定位

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. java导出Excel 好文收藏

    http://www.cnblogs.com/Damon-Luo/p/5919656.html https://www.cnblogs.com/klguang/p/6425422.html

  2. elasticsearch问题解决之分片副本UNASSIGNED

    在上一篇文章中,我记录了在windows下同一台机器上搭建es集群的步骤,第二天在向集群中创建索引的时候,出现了分片副本未分配的情况(UNASSIGNED). 虽然并不影响数据的插入和查询,但是有问题 ...

  3. 动画Completed事件里获取执行该动画的UI对象

    转:http://www.cnblogs.com/xyq/p/3775732.html 昨天群里有位童鞋提出如何在动画完成事件Completed里获取到执行该动画的UI对象. WPF里动画的Compl ...

  4. JSON与JAVA数据的转换-----从3,23到现在5.25才过去2个月,感觉时间过得那么漫长

    从3月23号去报到,期间经历了清明节,毕业论文答辩,从万达搬到东兴,五一节,毕业照,从东兴的一边搬到另外一个房间中去 2个月的时间过得如此的快啊!白驹过隙! 不要着急,不要和别人比,小龙哥写过3年代码 ...

  5. leetcode:Single Number【Python版】

    1.用双重循环逐个遍历(超时) 2.用list B的append和remove函数(超时) 3.用dict B(AC) class Solution: # @param A, a list of in ...

  6. Open-sourcing sso, the way we secure services at BuzzFeed

    文章来源: https://tech.buzzfeed.com/unleashing-the-a6a1a5da39d6 说明: 设计有好多地方值得借鉴,粘贴过来的排版不好 Today we are o ...

  7. angularJS自定义服务的几种方式

    在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value 使用形式的不同: 1)factory以返回对象的形式定义服务: mya ...

  8. Hyper-V 虚拟机连网

    参考:http://www.cnblogs.com/chenxizhang/p/3188005.html(个人推荐) 参考:http://blog.csdn.net/elvis_0123/articl ...

  9. 一个高效的敏感词过滤方法(PHP)

    $badword = array( '张三','张三丰','张三丰田' ); $badword1 = array_combine($badword,array_fill(0,count($badwor ...

  10. Oracle查看及修改Oracle最大连接数

    Oracle查看及修改Oracle最大连接数 .查询oracle的最大连接数: select * from v$parameter where name='processes'; .oracle 11 ...