如何包含位置绝对div？ [英] How to contain position absolute div?

问题描述

我有这个小提示这里，如下图所示

>

我需要实现的是使黑色容器根据项目内部动态扩展（项目是A，B，C）输出必须

p>

我的html是

 < div class =container 
< div class =itemA> A< / div> 
< div class =itemB> B< / div> 
< div class =itemC> C< / div> 
< div> 
  

my 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; item'）。each（function（）{y = Math.max（y，$（this）.height（）+ $（this）.position（）。top）;}）; $（'。container'）。 css（'height'，y）;}）;  

  .container {position：relative; width：200px;最小高度：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 = ：//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>  

I have this fiddle here and this is the illustration below

what I need to achieve is to make the black container dynamically expand base on the item inside (the items are A, B, C) the output must be

without setting the height statically

my html is

<div class="container">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
<div>    

my css is

.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;
}

解决方案

You can use this script. First compute the max height then set the height of the container

$(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>

这篇关于如何包含位置绝对div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！