CSS 3栏自适应布局
绝对定位
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栏自适应布局的更多相关文章
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- CSS 三栏自适应布局
CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高 ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
随机推荐
- 使用rewrite 让php 实现类似asp.net 的IHttpModule 进行带参数js文件的参数获取
asp.net 的IHttpModule 接口具有很大的作用,我们可以使用实现的模块进行全局的控制,但是在学习php 的过程中也想实现类似的功能,查找php 的文档,自己没有找到, 但是我们大家应该知 ...
- 【转】每天一个linux命令(34):du 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/10/2810755.html Linux du命令也是查看使用空间的,但是与df命令不同的是Lin ...
- Centos 6.5 yum 安装Apache软件
首先在系统上面查询一下是否已经安装了apache 软件[Apache软件在linux系统里的名字是httpd] rpm -qa httpd 如果有返回的信息,则会显示已经安装的软件.如果没 ...
- go test 初始化--- TestMain的使用
go test 功能,提高了开发和测试的效率. 有时会遇到这样的场景: 进行测试之前需要初始化操作(例如打开连接),测试结束后,需要做清理工作(例如关闭连接)等等.这个时候就可以使用TestMain( ...
- WinRAR打包时不包含文件夹本身,只打包文件夹里的文件和目录
加上-ep1 参数即可. rar u -m3 -s -r -o+ -ep1 -x*.zip client_zmv9.zip ".\client_zmv9\*"
- Bluez相关的各种tools的使用
7.1 Bccmd Bccmd是用来和CSR的芯片进行BCCMD(Bluecore command protocol)通讯的一个工具.BCCMD并非蓝牙协议栈的标准,而是CSR芯片的专属 ...
- 开始转型学习java
什么编程语言这些都是一样的,编程思想都是一样的.只不过是表现形式. 标识符 每一个字符在ascll码表例都有对应的数字 所以字符和数字是可以相加的 'a'+1 也可以显示数字对应的字符 (ch ...
- Sigar简介
大家好,我是Sigar.也许好多人还不认识我.下面就介绍一下我自己,好让大家对我有一个大致的了解. 我的全名是System Information Gatherer And Reporter,中文名是 ...
- SpringMVC的注解方式配置
SpringMVC支持使用注解方式配置,比配置文件方式更加灵活易用,是SpringMVC使用的主流模式. 1.在配置文件中开启SpringMVC的注解 <!-- 开启包扫描 --> < ...
- Java-Web中访问某个指定工程中的文件,报错后发现访问的文件是另一个工程里面的文件
问题: 浏览器向我的bingou项目中的UserDaoImpl.java发送请求, myeclipse报错:空指针异常 点击报错行之后,错误给定位到了另一个项目中的的一个文件 解决: 原因是文件名错误 ...