并列div自动等高
并列div自动等高
方法一:css控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完美的DIV三行三列自适应高度布局</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}
.header {
width:100%;
height:50px;
background:#EEE;
border-bottom:1px solid #000;
}
.colmask {
position:relative;
clear:both;
width:100%;
overflow:hidden;
}
.colright, .colmid, .colleft {
float:left;
width:100%;
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
overflow:hidden;
}
.threecol {
background:#BBB;
}
.threecol .colmid {
right:20%;
background:#CCC;
}
.threecol .colleft {
right:60%;
background:#DDD;
}
.threecol .col1 {
width:58%;
left:101%;
}
.threecol .col2 {
width:18%;
left:23%;
}
.threecol .col3 {
width:18%;
left:85%;
}
.footer {
clear:both;
width:100%;
height:50px;
background:#EEE;
border-top:1px solid #000;
}
</style>
</head>
<body>
<div class="header"> 这里是头部 </div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p> </div>
<div class="col2"> 这里是左栏 </div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer"> 这里是底部 </div>
</body>
</html>
方法二:JS控制
function SetSameHeight(obj1,obj2)
{
var h1 = $(obj1).outerHeight(); //获取对象1的高度
var h2 = $(obj2).outerHeight(); //获取对象2高度
var mh = Math.max( h1, h2); //比较一下
$(obj1).height(mh);
$(obj2).height(mh);
}
在页面用调用:
jQuery(document).ready(function($) { SetSameHeight(".left",".line");
SetSameHeight(".right_main",".line");//如果有3个div 就加这一行代码,再适应一次. }
参考博客:http://www.jianshu.com/p/93e61ec8f354
并列div自动等高的更多相关文章
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- table 与 div 固定宽高问题
div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
- 第4天:JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
- div 自动全屏高度
最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%
- Redis主从配置及通过Keepalived实现Redis自动切换高可用
Redis主从配置及通过Keepalived实现Redis自动切换高可用 [日期:2014-07-23] 来源:Linux社区 作者:fuquanjun [字体:大 中 小] 一:环境介绍: M ...
- JavaScript实现div宽、高自动缓慢拉伸
最近打算实现一个带有滤镜效果的地自动拉伸图片.发现使用css3浏览器兼容性得需要特别关注.这里我使用js实现了一个div边框自动拉伸和缩小.源码如下: <!DOCTYPE html>< ...
- 固定高度div,随内容自动变高css定义方法
*{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...
- 两个div并列居中显示——当display:inline;时,div的宽高不起作用即两个div重叠显示
解决办法: 将display设置为:inline-block
随机推荐
- js字符串处理
1.获取字符串实际长度 var jmz = {}; function strlen(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary> ...
- AppSettings和ConnectionStrings的区别
AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...
- SAP 质检使用非物料基本单位
今天也是奇葩了,物料A基本单位平方米,转化单位卷,销售和采购是按照平方米来采购,但是质检的需要按照平方米来做抽样检验.... 程序开发的: 修改该物料的工序基本单位为卷,再修改检验计划基本单位为卷 程 ...
- JavaScript学习——判断数据类型总结(转)
一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) ...
- Singleton、MultiThread、Lib——实现单实例无锁多线程安全API
前阵子写静态lib导出单实例多线程安全API时,出现了CRITICAL_SECTION初始化太晚的问题,之后查看了错误的资料,引导向了错误的理解,以至于今天凌晨看到另一份代码,也不多想的以为s ...
- HDU 3076 ssworld VS DDD 概率dp,无穷级数,oj错误题目 难度:2
http://acm.hdu.edu.cn/showproblem.php?pid=3076 不可思议的题目,总之血量越少胜率越高,所以读取时把两人的血量交换一下 明显每一轮的胜率和负率都是固定的,所 ...
- hdu 4616 Game
http://acm.hdu.edu.cn/showproblem.php?pid=4616 要记录各种状态的段 a[2][4] a[0][j]表示以trap为起点一共有j个trap的最优值 a[1 ...
- 二模 (1) day2
第一题: 题目大意: N层楼,K个人,M个箱子在1楼,给出K个人的初始状态(在第几楼,正在向上走还是向下走,向上走的人手里已经有箱子),每次移动一层楼,求把所有箱子(手里拿着的不算在M里)全部搬到顶楼 ...
- Android事件处理--读书笔记
2013-12-28 17:57:17 1. Android提供了两种方式的事件处理:基于回调和基于监听的事件处理: 1.1 对基于监听的事件处理而言,主要做法是为Android界面组件绑定特定的事件 ...
- C-union的使用
union有两个作用: 1,节约空间,如果一个struct存在两个互斥的变量,则可以把这个struct变成union 2,将同一个内存作为多种解释 代码: #include <iostream& ...