css 子级加了绝对定位 父级撑不开
<styletype="text/css">.div01{width:600px;background:red;}.div02{width:500px;border:1p...
<style type="text/css">
.div01{ width:600px; background:red;}
.div02{ width:500px; border:1px solid white; position:relative; left:50px;}
.div03{ width:200px; height:150px; background:blue; position:absolute; left:0px; top:5px; color:white; text-align:center; line-height:150px;}
.div04{ width:200px; height:150px; background:green; position:absolute; right:0px; top:5px; color:white; text-align:center; line-height:150px;}
</style>
</head>
<body>
<div class="div01">
<div class="div02">
<div class="div03">1</div>
<div class="div04">2</div>
</div>
</div>
</body>
程序员调的控件自带绝对定位，搞得我的布局显示不正常，写了一个简单的实例，就是要做到div01自动撑开，加height这个方法就算了，效果不太好 展开
.div01{ width:600px; background:red;}
.div02{ width:500px; border:1px solid white; position:relative; left:50px;}
.div03{ width:200px; height:150px; background:blue; position:absolute; left:0px; top:5px; color:white; text-align:center; line-height:150px;}
.div04{ width:200px; height:150px; background:green; position:absolute; right:0px; top:5px; color:white; text-align:center; line-height:150px;}
</style>
</head>
<body>
<div class="div01">
<div class="div02">
<div class="div03">1</div>
<div class="div04">2</div>
</div>
</div>
</body>
程序员调的控件自带绝对定位，搞得我的布局显示不正常，写了一个简单的实例，就是要做到div01自动撑开，加height这个方法就算了，效果不太好 展开
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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
.div01{ width:600px; background:red; }
.div02{ width:500px; border:1px solid white; position:relative; left:50px;}
.div03{ width:200px; height:150px; background:blue; position:absolute; left:0px; top:5px; color:white; text-align:center; line-height:150px;}
.div04{ width:200px; height:150px; background:green; position:absolute; right:0px; top:5px; color:white; text-align:center; line-height:150px;}
/* 添加一个占位的 ，这个占位的让程序给他赋值高度，高度要和最大绝对定位的高度相等，，不然还是会被截掉，如果绝对定位想有上下边距，高度要加上边距 */
.occup{
width: 200px;
height: 160px;
opacity:0;
filter: Alpha(Opacity=0);
z-index:0;
}
</style>
</head>
<body>
<div class="div01">
<div class="div02">
<div class="occup"></div>
<div class="div03">1</div>
<div class="div04">2</div>
</div>
</div>
</body></html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
.div01{ width:600px; background:red; }
.div02{ width:500px; border:1px solid white; position:relative; left:50px;}
.div03{ width:200px; height:150px; background:blue; position:absolute; left:0px; top:5px; color:white; text-align:center; line-height:150px;}
.div04{ width:200px; height:150px; background:green; position:absolute; right:0px; top:5px; color:white; text-align:center; line-height:150px;}
/* 添加一个占位的 ，这个占位的让程序给他赋值高度，高度要和最大绝对定位的高度相等，，不然还是会被截掉，如果绝对定位想有上下边距，高度要加上边距 */
.occup{
width: 200px;
height: 160px;
opacity:0;
filter: Alpha(Opacity=0);
z-index:0;
}
</style>
</head>
<body>
<div class="div01">
<div class="div02">
<div class="occup"></div>
<div class="div03">1</div>
<div class="div04">2</div>
</div>
</div>
</body></html>
更多追问追答
追问
用程序赋高度值我早就想过，但是动不动就要写程序，那我这写css的未免显得太菜了，所以才来问问有没办法用css解决，解决不了就只能让程序员设置固定高度了
追答
没有。
你子元素用绝对定位了，父元素如何适应你呢？
要么用程序处理，要么你换个思路。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
