自动调整容器< DIV>高度以适应绝对定位的孩子DIV [英] auto adjust container <DIV> height to accommodate absolutely positioned child <DIV>s

问题描述

有没有办法自动调整容器的DIV高度以适应绝对定位的孩子DIV？
我想得到类似于

 
 + --------------- -------- + 
 |容器| 
 | + ------ + + ------ + | 
 | | chld | | chld | | 
 | | 1 | | 2 | | 
 | | | | | | 
 | + ------ + + ------ + | 
 | + ------ + | 
 | | chld | | 
 | | 3 | | 
 | | | | 
 | + ------ + | 
 + ----------------------- + 
 

我尝试类似：

 < div class =containerstyle =position：relative; border：solid thin > 
< div class =chldstyle =width：20px; 
 height：20px; 
 position：absolute; left：5px; top：5px; 
 border：dashed薄;>< DIV> 
< div class =chldstyle =width：20px; 
 height：20px; 
 position：absolute; left：30px; top：5px; 
 border：dashed薄;>< DIV> 
< div class =chldstyle =width：20px; 
 height：20px; 
 position：absolute; left：15px; top：30px; 
 border：dashed薄;>< / DIV> 
< / div> 
  

但容器div保持零高度。我明白，这可能是预期的行为，因为绝对定位时元素会被流出，但是有没有解决方法？ （除了预先计算结果的高度并手动设置）

解决方案

如果您使用position：relative而不是绝对位置，将保留在元素应该在的页面结构中，这个空间将是你移动元素的高度。

所以你可以将chld1和chld2浮动到把它们并排放在一起，加上顶部&底部填充将chld 3向下推，并使用相对位置将其拆分并移动到任意高度。然后在chld3上使用clear。

类似于

  #exp_outer {width：400px; border：1px solid black;}＃chld1 {float：left; margin：30px 0 20px; left：50px}＃chld2 {float：right; margin：30px 0 20px; right：50px;}＃chld3 {left：150px; clear：both;}。box {position：relative;宽度：80px; height：80px; border：1px solid black;}  

< div id = exp_outer > < div id =chld1class =box> Child1< / div> < div id =chld2class =box> Child2< / div> < div id =chld3class =box> Child3< / div>< / div>

is there a way to auto adjust container DIV height to accommodate absolutely positioned child DIVs? i'd like to get something like

+-----------------------+
| container             |
|  +------+   +------+  |
|  | chld |   | chld |  |
|  |   1  |   |   2  |  |
|  |      |   |      |  |
|  +------+   +------+  |
|       +------+        |
|       | chld |        |
|       |   3  |        |
|       |      |        |
|       +------+        |
+-----------------------+

i try something like:

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

but the "container" div stays zero height. I understand, that this might be the expected behaviour, as elements are 'taken out' of the flow when positioned absolutely, but is there a workaround for this? (except for precalculating the resulting height and setting it manually)

解决方案

If you use position:relative instead of position absolute an empty space will stay in the page structure where the element should be, and this space will be the height of the element you've moved.

So you could float chld1 and chld2 to get them side by side, add top & bottom padding to push chld 3 down and use position relative to split them apart and move to any height. Then use clear both on chld3.

Something like

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

这篇关于自动调整容器< DIV>高度以适应绝对定位的孩子DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！