具有绝对孩子的多个div的自动高度？

Question

我正在开发一个类似“卡片”的界面，每个'卡'（相对位置的矩形div）有多个子项位于绝对位置，并且在同一页面上有多个div。就像这样。

我花了几个小时寻找解决方案但没有成功。从我读过的内容来看，不可能在带有CSS的绝对孩子的div上做自动高度。我偶然发现了一个jQuery example，但我无法弄清楚如何操纵它来处理多个div。我也试过clearfixing，并操纵溢出。

我一直在处理的页面（http://q.glorbi.com/profile.php）工作正常，但每个div的高度限制为300像素，根据其内容可能太少或太多。

有没有人知道如何用绝对孩子来调整多个父母的身份？任何解决方案都很好，即使它依赖于jQuery等等！

谢谢！

Answer 1

您的每张卡片都是这样的

<div class="box">
  <div id="askerdp"></div>
  <div class="question">Are you awesome?</div>
  <div class="answer">I am the awesomest human being alive.</div>
</div>

.box相对而内部div为绝对。鉴于每张卡的结构简单，为什么不这样做呢

<div class="box">
  <div class="container">
    <div id="askerdp"></div>
    <div class="question">Are you awesome?</div>
  </div>
  <div class="answer">I am the awesomest human being alive.</div>
</div>

让.container相对，#askerdp绝对，其他一切都是静态的。这应该可以解决您的自动高度问题，并且看起来仍然和现在一样。