css中div以float定位后高度怎么才能自动增加?(在线等)
我有一个div(父容器),本身是float定位的,宽度一定.内部有九个div,类似九宫格排列(除中间的div放内容外,其他的都是加的背景图片,且四个角的div宽高一定),...
我有一个div(父容器),本身是float定位的,宽度一定.
内部有九个div,类似九宫格排列(除中间的div放内容外,其他的都是加的背景图片,且四个角的div宽高一定),因为父容器不是position定位,所以它内部的元素也不能使用position.
我想让中间的div高度随内容增加.而且两边的div高度随之也增加,这样背景图片才能平铺.
可是怎么弄才能达到想要的效果呢?
我搞了好久,中间div两边的div高度和中间的相同才行,可是这样就不是随内容自动增加高度了 展开
内部有九个div,类似九宫格排列(除中间的div放内容外,其他的都是加的背景图片,且四个角的div宽高一定),因为父容器不是position定位,所以它内部的元素也不能使用position.
我想让中间的div高度随内容增加.而且两边的div高度随之也增加,这样背景图片才能平铺.
可是怎么弄才能达到想要的效果呢?
我搞了好久,中间div两边的div高度和中间的相同才行,可是这样就不是随内容自动增加高度了 展开
2个回答
展开全部
大概就是这样的了!哪看不懂问我!
记得加分哟
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1,#div2,#div3,#div7,#div8,#div9{border:1px solid #FF0000;width:100px;height:100px;}
#main{width:306px;}
#main>div{float:left;width:100px;}
#div4,#div5,#div6{border:1px solid #FF0000;}
</style>
</head>
<body>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5">
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
</div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</div>
<script type="text/javascript">
var div5h=document.getElementById("div5").scrollHeight+"px";
document.getElementById("div4").style.height=div5h;
document.getElementById("div6").style.height=div5h;
</script>
</body>
</html>
记得加分哟
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1,#div2,#div3,#div7,#div8,#div9{border:1px solid #FF0000;width:100px;height:100px;}
#main{width:306px;}
#main>div{float:left;width:100px;}
#div4,#div5,#div6{border:1px solid #FF0000;}
</style>
</head>
<body>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5">
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
</div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</div>
<script type="text/javascript">
var div5h=document.getElementById("div5").scrollHeight+"px";
document.getElementById("div4").style.height=div5h;
document.getElementById("div6").style.height=div5h;
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
