绝对定位

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. 【BZOJ3295】【CQOI2011】动态逆序对

    cdq分治经典例题,然而智商掉线傻逼错误坑了两天 原题: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你 ...

  2. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  3. 升级CentOS 7.4内核版本的三种方案

    https://blog.csdn.net/breeze915/article/details/79243673 在实验环境下,已安装了最新的CentOS 7.4操作系统,现在需要升级内核版本. 实验 ...

  4. JAVA关闭钩子

    JAVA的关闭钩子: 1. 一般应用程序在关闭时都需要做一些善后清理工作,但是用户并不会总是按照推荐的方法关闭应用程序,比如用户直接关闭控制台程序或者按下Ctrl+C结束应用程序,这样就导致清理工作得 ...

  5. spring 注解列表

    table th:first-of-type { width: 15%; } table th:nth-of-type(2) { } 注解 作用 例子 @SuppressWarnings 忽略警告 类 ...

  6. POJ2411骨牌覆盖——状压dp

    题目:http://poj.org/problem?id=2411 状压dp.注意一下代码中标记的地方. #include<iostream> #include<cstdio> ...

  7. R(4) read/write

    write.table() 数据导入导出最常用的方式是使用read.table()函数和write.table()处理CSV文件的导入导出,read.table()和write.table()可以处理 ...

  8. lwip编译选项

    修改默认选项时,不要修改opt.h文件,通过lwipopts.h修改. 和内存管理以及TCP发送性能相关的选项 // 为1时使用系统库malloc/free进行内存管理 #ifndef MEM_LIB ...

  9. chrome从版本55开始,不再支持设置网页内容编码

    Hi Everyone,   Chrome 55 has removed the Encoding menu and Chrome will do auto-encoding detection no ...

  10. BASIC-11_蓝桥杯_十六进制转十进制

    注意事项: 1.长数据注意选择long long类型,用%ldd输出,防止数据溢出; 示例代码: #include <stdio.h>#include <string.h>#i ...