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

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

          

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. python address already in use

    1)找到使用端口的进程pid netstat -lp 2)kill掉pid kill -9 1234

  2. 解决mysql Table ‘xxx’ is marked as crashed and should be repaired的问题。

    解决mysql Table 'xxx' is marked as crashed and should be repaired的问题. 某个表在进行数据插入和更新时突然出现Table 'xxx' is ...

  3. selenium page object & Page Factory

    package demo; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa ...

  4. 第20讲 HOOK和数据库编程

    1,安装钩子过程可以通过SetWindowsHookEx函数来完成 2,得到当前线程ID,可以用GetCurrentThreadId 3,移除钩子可以用UnhookWindowsHookEx函数 4, ...

  5. jquery样式篇

    1.jquery: 1.1简介 jquery是一个轻量级的javascript库.版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支 持移动端开发. 每一个版本分为开发版和压 ...

  6. MFC如何读取XML

    <?xml version="1.0" encoding="utf-8"?> <Cases> <case> <No&g ...

  7. vnc远程运行3D游戏

    使用的版本:VNC-5.2.3-Windows.exe   vnc官网 安装的过程中需要输入license key,以下给出一些enterprise license(最大权限的License): K5 ...

  8. 【leetcode】Intersection of Two Linked Lists

    题目简述: Write a program to find the node at which the intersection of two singly linked lists begins. ...

  9. DataGridView回车焦点横向移动

    protected override bool ProcessCmdKey(ref Message msg, Keys keyData)        {            if (keyData ...

  10. 了解 Spring Data JPA

    前言 自 JPA 伴随 Java EE 5 发布以来,受到了各大厂商及开源社区的追捧,各种商用的和开源的 JPA 框架如雨后春笋般出现,为开发者提供了丰富的选择.它一改之前 EJB 2.x 中实体 B ...