CSS布局 这个很基础，方法也很多，要留意的知识点还是有一些。

比如IE6的触发layout  *zoom:1

比如使用浮动后的清除浮动  clear:both

需求的延伸也会有一些:

比如三栏等高

比如左栏或者右栏固定，就是position:fixed的运用，当然ie6不支持

基本代码结构：

<div class="con">

    <div class="left"></div>

    <div class="main"></div>

    <div class="right"></div>

</div>

按照运用的知识点总结一下一下几种方式

方案一  相对定位

　　全absolute

左栏+右栏 absolute

方案二  负margin

float+负margin

inline-block+负margin

方案三  弹性盒模型 flex-box

CSS 三栏自适应布局的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  3. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  4. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  5. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  6. CSS 3栏自适应布局

    绝对定位 css html,body{margin: 0px;height:100%;} div{height: 100%;} .left,.right {top: 0px;position: abs ...

  7. CSS三列自适应布局（两边宽度固定，中间自适应）

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...

  8. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  9. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

随机推荐

  1. OpenSSL编程模型

    相关头文件: #include <openssl/ssl.h>#include <openssl/err.h> 客户端程序编写流程: 服务端编写流程: 产生私钥:# opens ...

  2. 发布MeteoInfo 1.2.3

    提升了对GeoTiff格式数据的读取能力(多个tiles).当然还有MeteoInfoLab功能的提升.下载地址:http://yun.baidu.com/share/link?shareid=669 ...

  3. Jmeter之参数化函数助手__CSVRead

    1.在Tool->函数对话框中选择__CSVRead,2处填写测试用例的文档地址(测试用例要以csv格式保存),3处是测试用例中参数的位置,第一栏参数的CSV文件列号填0,第二栏参数的CSV文件 ...

  4. VMware虚拟机中共享文件夹 开机启动

    输入命令: sudo /usr/bin/vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o uid=1000 -o gid=1000 -o umask=02 ...

  5. centos7 shell 安装docker redis mongodb 等

    脚本下载: 百度网盘 提取码: wc4r 下载后上传到 服务器 chmod +x docker.sh sh docker.sh

  6. Aspose.Words实现邮件合并功能和打印

    前言 最近公司要做一个B/S架构的web打印系统,主要是可以上传.下载.邮件合并.打印等等,还有就是角色的分配.用户的创建.日志记录等等,跟一般的web系统一样.可能不一样的就是需求:想把excel的 ...

  7. SaaS系统怎么做物流行业年度经营报告，MVC+js+echarts实现

    前言 马上就到年底了,很多公司都要汇总这一年的经营情况,如果一个系统没有自动生成年报的功能, 需要人工手工去做年报,我相信可能是一个不小的工作量,最近我通过一个星期的时间,结合系统情况自动生成年报,全 ...

  8. SpringBoot整合redis简单实现

    1.创建springboot项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...

  9. 批量安装Zabbix_Agent

    使用自动化部署工具Ansible批量部署zabbix_agent. 1. 安装Ansible yum –y install ansible 内网情况下,现在ansible及其依赖的rpm包,添加到yu ...

  10. Python批量图片识别并翻译——我用python给女朋友翻译化妆品标签

    Python批量图片识别并翻译--我用python给女朋友翻译化妆品标签 最近小编遇到一个生存问题,女朋友让我给她翻译英文化妆品标签.美其名曰:"程序猿每天英语开发,英文一定很好吧,来帮我翻 ...