<div>Left</div>
<div>Right</div>
</div>
纯css的:如果left宽度固定的话(比如:200px),就给外面那个大div弄个宽200px的背景图,只在y方向一直重复
要是left宽度不固定或者你愿意用javascript,就用js取得两个div,判断高度,让矮的那个高度等于高的那个:
<div id="left">Left</div>
<div id="right">Right</div>
<script>
function sameH(el1,el2) {
var a = document.getElementById(el1)
var b = document.getElementById(el2)
if (a &&b) {
if (a.scrollHeight <b.scrollHeight) {
a.style.height = b.scrollHeight + "px"
}
else {
b.style.height = a.scrollHeight + "px"
}
}
else {
alert("sameH函数需要的对象id不存在或创建在函数运行之后") }
}
sameH("left","right")//传入你的两个div的id
</script>
用css3动画去做
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>00</title>
<style>
.xian{ width:50px height:1px background:#000000 margin-top:100px}
.xian{animation: myfirst 5s}
@keyframes myfirst
{
from {width: 50px}
to {width: 1000px}
}
</style>
</head>
<body>
<div class="xian"></div>
</body>
</html>
低版本浏览器不支持css3属性,用谷歌什么的高版本浏览器看。