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

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

          

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. Qt 程序打包发布

    Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,Qt 官方开发环境里自带了一个工具:windeployqt.exe.在Qt安装目录如:C:\Qt\Qt5.7. ...

  2. Spring用代码来读取properties文件

    我们都知道,Spring可以@Value的方式读取properties中的值,只需要在配置文件中配置org.springframework.beans.factory.config.PropertyP ...

  3. lnmp安装

    一.准备工作 需要的安装包都是从官网下载的,系统centos6.6 nginx-1.10.1.tar.gz php-5.6.24.tar.gz mysql-5.5.32.tar.gz 所有的包都一传入 ...

  4. MVC 添加Area

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...

  5. wpf 悬浮窗口的实现

    又到了写点东西的时候,因为有了新的收获,所以用随笔来记录下自己的成长.话不多说,正入主题. 最近又遇到一个新的需求,有一组控件,需要悬浮显示在面板的边缘上,刚开始的时候,是不显示的,点击后显示,然后再 ...

  6. C#水晶报表,窗体不显示,闪退

    一.问题说明 由于VS2008以后水晶报表不在集成,要用的话需要单独下载. 这里注意如果是用在C#窗体程序里的话一定要下载exe文件,安装msi文件的话VS工具栏里找不到水晶报表控件的.如果你的是64 ...

  7. mysql 有报错  ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists

    sh-4.1# /etc/init.d/mysqld status ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql ...

  8. Blender 脚本之 Operator 初探

    addon(插件)用来扩展 Blender 的功能,跟其他软件里的 plugin(插件)一样,去掉不会影响软件的运行.插件可以加到 Blender 的用户偏好设置目录里,或者就在你所编辑的.blend ...

  9. MongoVUE1.6.9破解启动提示System.ArgumentException: 字体“Courier New”不支持样式“Regular”

    用MongoVUE,发现报错,报错信息如下: System.ArgumentException: 字体"Courier New"不支持样式"Regular". ...

  10. Windows - 性能监控之磁盘剩余空间大小警报

    开始 -> 运行 -> 键入命令 perfmon.msc 数据收集器(Data Collector Sets) -> 用户自定义(User Defined)