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宽度自适应.这道题在今年 ...
随机推荐
- 【BZOJ3295】【CQOI2011】动态逆序对
cdq分治经典例题,然而智商掉线傻逼错误坑了两天 原题: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你 ...
- ES6 — 箭头函数
一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...
- 升级CentOS 7.4内核版本的三种方案
https://blog.csdn.net/breeze915/article/details/79243673 在实验环境下,已安装了最新的CentOS 7.4操作系统,现在需要升级内核版本. 实验 ...
- JAVA关闭钩子
JAVA的关闭钩子: 1. 一般应用程序在关闭时都需要做一些善后清理工作,但是用户并不会总是按照推荐的方法关闭应用程序,比如用户直接关闭控制台程序或者按下Ctrl+C结束应用程序,这样就导致清理工作得 ...
- spring 注解列表
table th:first-of-type { width: 15%; } table th:nth-of-type(2) { } 注解 作用 例子 @SuppressWarnings 忽略警告 类 ...
- POJ2411骨牌覆盖——状压dp
题目:http://poj.org/problem?id=2411 状压dp.注意一下代码中标记的地方. #include<iostream> #include<cstdio> ...
- R(4) read/write
write.table() 数据导入导出最常用的方式是使用read.table()函数和write.table()处理CSV文件的导入导出,read.table()和write.table()可以处理 ...
- lwip编译选项
修改默认选项时,不要修改opt.h文件,通过lwipopts.h修改. 和内存管理以及TCP发送性能相关的选项 // 为1时使用系统库malloc/free进行内存管理 #ifndef MEM_LIB ...
- chrome从版本55开始,不再支持设置网页内容编码
Hi Everyone, Chrome 55 has removed the Encoding menu and Chrome will do auto-encoding detection no ...
- BASIC-11_蓝桥杯_十六进制转十进制
注意事项: 1.长数据注意选择long long类型,用%ldd输出,防止数据溢出; 示例代码: #include <stdio.h>#include <string.h>#i ...