自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。

效果图如下：高度自适应——宽度自适应

          

1,高度自适应布局

原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。代码如下：

html代码：

<body>

        <div class="top">

            120px

        </div>

        <div class="main">

            自适应

        </div>

        <div class="bottom">

            120px

        </div>

</body>

css代码：

.top{

    width: 100%;

    height: 120px;

    position: absolute;

    background-color: greenyellow;

}

.main{

    position: absolute;

    width: 100%;

    top: 120px;

    bottom: 120px;

    background-color: azure;

    height: auto;

}

.bottom{

    position: absolute;

    bottom:;//别漏了

    width: 100%;

    height: 120px;

    background-color:greenyellow ;

}

2,宽度自适应，有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。

a，用绝对定位来设置宽度自适应布局，原理：针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动。

html代码：

<body>

        <div class="left">

            200px

        </div>

        <div class="main">

            自适应

        </div>

        <div class="right">

            200px

        </div>

</body>

css代码：

html,

body {

    margin:;

    height: 100%;

    padding:;

    font-size: 30px;

    font-weight:;

    text-align: center;

}

.left,

.right {

    width: 200px;

    display: inline;

    height: 100%;

    background-color: greenyellow;

}

.left {

    float: left;

}

.right {

    float: right;

}

.main {

    position: absolute;

    left: 200px;

    right: 200px;

    height: 100%;

    background-color: azure;

    display: inline;

}

b，中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。

注意：自适应的div必须放在left和right前面且包含在一个父div里。

html代码：

<body>

        <div class="main"> <!--看清楚，这里用一个父div包住-->

            <div class="content">

                自适应

            </div>

        </div>

        <div class="left">

            200px

        </div>

        <div class="right">

            200px

        </div>

</body>

css代码：

html,

body {

    margin:;

    height: 100%;

    padding:;

    font-size: 30px;

    font-weight:;

    text-align: center;

}

.main {

    width: 100%;

    height: 100%;

    float: left;

}

.main .content {

    margin: 0 200px;

    background-color: azure;

    height: 100%;

}

.left,

.right {

    width: 200px;

    height: 100%;

    float: left;

    background-color: greenyellow;

}

.left {

    margin-left: -100%; //important

}

.right {

    margin-left: -200px; //important

}

c，自身浮动，原理：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。

html代码：

<body>

        <div class="left">

            200px

        </div>

        <div class="right">

            200px

        </div>

        <div class="main">

            自适应

        </div>

</body>

css代码：

html,

body {

    margin:;

    height: 100%;

    padding:;

    font-size: 30px;

    font-weight:;

    text-align: center;

}

.main {

    margin: 0 200px;

    height: 100%;

    background-color: azure;

}

.left,

.right {

    width: 200px;

    height: 100%;

    background-color: greenyellow;

}

.left {

    float: left;

}

.right {

    float: right;

}

DIV+CSS自适应布局的更多相关文章

  1. DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

  5. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  8. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  9. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

随机推荐

  1. tomcat虚拟路径

    目的:减小项目大小,方便部署和资源共享 tomcat/conf/server.xml host 标签中添加 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  2. 【svn】SSL error: A TLS warning alert has been received的解决方法

    第一次用svn(>_<),结果在运行下面语句时,svn很不友好的报错了..... svn co http:10.11.12.13/test1/test2 . 报错信息: svn: OPTI ...

  3. JS身份证号码校验

    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...

  4. 【转】Js获取当前日期时间及格式化操作

    (转自:http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800002.html) var myDate = new Date(); myD ...

  5. ［转］金融业容灾技术分析 （终于看到QREP了）

    源地址:http://www.cnblogs.com/SuperXJ/p/3480929.html 数据复制技术很多,初步比较如下. 后面重点讨论银行最常用的存储复制和数据库复制..当然,我最推荐的还 ...

  6. angular1.x的简单介绍(二)

    首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...

  7. JS中，！=， ！== 和 ！的区别和使用场景

    var num = 1; var str = '1'; var test = 1;   test == num   //true 相同类型 相同值 test === num  //true 相同类型 ...

  8. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  9. PhpStorm/Xdebug安装使用

    安装环境:XAMPP;phpStorm版本10; windows 7 64bit. XAMPP.phpStorm 都直接安装在了D盘根目录,9999m目录建在D:\xampp\htocts下,即目录工 ...

  10. eclipse启动不了，出现“Java was started but returned exit code=13......”对话框

    eclipse启动不了,出现"Java was started but returned exit code=13......"对话框如下 解决方案:1.使用的是java jdk6 ...