我有这个小提琴here http://jsfiddle.net/45atnh0u/这是下图
我需要实现的是让黑色容器根据里面的项目（项目是A、B、C）动态扩展，输出必须是
无需静态设置高度
我的html是
<div class="container">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
<div>
我的CSS是
.container{
position:relative;
width:200px;
min-height:300px;
background-color:black
}
.itemA{
position:absolute;
top:260px;
background-color:red;
width:30px;
height:30px;
}
.itemB{
position:absolute;
top:50px;
right:90px;
background-color:green;
width:30px;
height:30px;
}
.itemC{
position:absolute;
top:220px;
right:50px;
background-color:blue;
width:30px;
height:30px;
}
您可以使用这个脚本。首先计算最大高度，然后设置容器的高度
$(function(){
var y = 0;
$('.container .item').each(function(){
y = Math.max(y, $(this).height() + $(this).position().top);
});
$('.container').css('height', y);
});
.container{
position:relative;
width:200px;
min-height:200px;
background-color:black
}
.itemA{
position:absolute;
top:260px;
background-color:red;
width:30px;
height:30px;
}
.itemB{
position:absolute;
top:50px;
right:90px;
background-color:green;
width:30px;
height:30px;
}
.itemC{
position:absolute;
top:220px;
right:50px;
background-color:blue;
width:30px;
height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="itemA item">A</div>
<div class="itemB item">B</div>
<div class="itemC item">C</div>
<div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
