JS的左右两列自动拉伸对齐

前边发了个后遗症比较多的自动对齐,现在发个JS的高度自动对齐代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>高度对齐</title>

<script type="text/javascript">

function alignHeight(eleA,eleB){

if(!document.getElementById(eleA)){return false;}

if(!document.getElementById(eleB)){return false;}

var heightA = document.getElementById(eleA).clientHeight;

var heightB = document.getElementById(eleB).clientHeight;

if(heightA > heightB){

document.getElementById(eleB).style.height = heightA + "px";

document.getElementById(eleA).style.height = heightA + "px";

}else{

document.getElementById(eleA).style.height = heightB + "px";

document.getElementById(eleB).style.height = heightB + "px";

}

}

window.onload =

function z_align(){

alignHeight("left","right"); //只需将需要对齐的两个模块的id写在此处即可。

//alignHeight("AAA","BBB") 可依此连续多组。

}

</script>

<style type="text/css">

#main{width:400px}

div{border:1px solid #666;padding:10px;}

#left{float:left;width:150px}

#right{float:right;width:180px}

</style>

</head>

<body>

<div id="main">

<div id="left">高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高高</div>

<div id="right">我自动跟他对齐</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏c#开发者

在DataGrid中选择,确认,删除多行复选框列表

在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Mul...

38970
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

31780
来自专栏肖蕾的博客

Java代码动态修改 ConstraintLayout 内控件布局的辅助类

15630
来自专栏菩提树下的杨过

Flash/Flex学习笔记(40):弹性运动续--弹簧

上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧,如果把弹簧的一头固定起来(即相当于目标点),...

20950
来自专栏GIS讲堂

openlayers2渐变色渲染

在前文中,讲到了oL2中唯一值渲染的实现方式,在本文讲述ol2中渐变色渲染的实现方式。

26120
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(三):基本模块调用

搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

35350
来自专栏大数据学习笔记

org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'userService' availab

1.问题描述 Hibernate+Spring+SpirngMVC+Maven异常信息: org.springframework.beans.factory...

1.7K90
来自专栏Golang语言社区

使用WebAssembly和Go编写前端Web框架

JavaScript Frontend frameworks have undoubtedly helped to push the boundaries of...

42630
来自专栏lonelydawn的前端猿区

前端验证码绘制(canvas)

一切尽在代码中 js文件 /** * canvas绘制动画浮动验证码 * code by lonelydawn 2017-04-10 */ var c...

36070
来自专栏技术之路

QTableView 添加按钮

这里说一下怎么在QTableView添加一个按钮 效果是点击button弹出一个对话框。 ? 看一下ButtonDelegate的代码 #ifndef BUTT...

39560

扫码关注云+社区

领取腾讯云代金券