如何定位CSS可以让左边框的长度随右边的内容增加而曾长? 10
如何定位CSS可以让左边框的长度随右边的内容增加而曾长?就是左边的边框的内容是副导航,长度有限,但是右边的主要内容有时候很多很长,而左边的还是那么短的话会显得很不美观,就...
如何定位CSS可以让左边框的长度随右边的内容增加而曾长?
就是左边的边框的内容是副导航,长度有限,
但是右边的主要内容有时候很多很长,
而左边的还是那么短的话会显得很不美观,
就想要左边的边框的长度随右边的内容增加而曾长要怎么实现呢? 展开
就是左边的边框的内容是副导航,长度有限,
但是右边的主要内容有时候很多很长,
而左边的还是那么短的话会显得很不美观,
就想要左边的边框的长度随右边的内容增加而曾长要怎么实现呢? 展开
2个回答
展开全部
加个很简单的JS就可以了
判断左右两DIV高度最大的,然后让高度小的 等于高度大的……
下面是简单案例,复制运行试试,两个DIV都没加高度。
<!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>
</head>
<style>
*{ margin:0px; padding:0px;}
ul{ list-style-type:none;}
#height1{ width:200px; float:left; border:1px solid #000000;}
#height2{ width:600px; margin-left:10px; float:left; border:1px solid #000000; }
</style>
<body>
<div id="height1">
</div>
<div id="height2">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script type="text/javascript">
var height1 = document.getElementById("height1");
var height2 = document.getElementById("height2");
if( height1.offsetHeight > height2.offsetHeight){
height2.style.height = height1.offsetHeight + "px";
}
else{
height1.style.height = height2.offsetHeight + "px";
}
}
</script>
</body>
</html>
判断左右两DIV高度最大的,然后让高度小的 等于高度大的……
下面是简单案例,复制运行试试,两个DIV都没加高度。
<!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>
</head>
<style>
*{ margin:0px; padding:0px;}
ul{ list-style-type:none;}
#height1{ width:200px; float:left; border:1px solid #000000;}
#height2{ width:600px; margin-left:10px; float:left; border:1px solid #000000; }
</style>
<body>
<div id="height1">
</div>
<div id="height2">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script type="text/javascript">
var height1 = document.getElementById("height1");
var height2 = document.getElementById("height2");
if( height1.offsetHeight > height2.offsetHeight){
height2.style.height = height1.offsetHeight + "px";
}
else{
height1.style.height = height2.offsetHeight + "px";
}
}
</script>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询