css - 具有绝对子项的多个 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 绝对，其他一切都是静态的。这应该可以解决您的自动高度问题，并且看起来仍然和现在一样。