并列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");//如果有３个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
随机推荐
- 张艾迪（创始人）：AOOOiA.global因梦想而诞生
AOOOiA.global因梦想而诞生 The World No.1 Girl :Eidyzhang The World No.1 Internet Girl :Eidyzhang AOOOiA.gl ...
- 张艾迪Eidyzhang：解码天才Eidyzhang的诞生
AOA解码:天才Eidyzhang的诞生AOA深度解读:世界第一天才Eidyzhang: (TheWorldNo.1Girl+TheWorldNo.1InterentGirl+世界第一女孩+世界第一互 ...
- C#.web 打开PDF
转自:http://blog.163.com/red_guitar@126/blog/static/11720612820112483221665/ string fileName = "2 ...
- Extjs 视频教程
---恢复内容开始--- 网易云课堂 <尚学堂_Ext视频教程> login.html <html> <head> <meta http-equiv=&quo ...
- HDU 3466
Proud Merchants Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) ...
- Mysql 字符串处理函数
函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例:select left(content,200) as abstract from my ...
- 25款漂亮的 WordPress 杂志主题
WordPress是一个免费和开源博客工具和一个内容管理系统(CMS)基于 PHP 和 MySQL,它运行在一个 Web 托管服务.每个月的 WordPress 主题是由开发人员,其中用户喜欢使用 W ...
- HTML内容整理
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- SQlServer 从系统表 sysobjects 中获取数据库中所有表或存储过程等对象
[sysobjects] 一.概述 系统对象表. 保存当前数据库的对象,如约束.默认值.日志.规则.存储过程等,该表中包含该数据库中的表 存储过程 视图等所有对象 在sqlserver2005,sql ...
- 从协议VersionedProtocol开始1
Phase 0: Make a plan You must first decide what steps you're going to have in your process. It sound ...