前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS的左右两列自动拉伸对齐

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

作者头像
练小习
发布2017-12-29 10:31:11
3.5K0
发布2017-12-29 10:31:11
举报
文章被收录于专栏:练小习的专栏练小习的专栏

前边发了个后遗症比较多的自动对齐,现在发个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>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档