Liquid HTML - 大小问题答案

【问题标题】：Liquid HTML - sizing issueLiquid HTML - 大小问题
【发布时间】：2012-07-29 19:10:14
【问题描述】：

为什么红框和绿框的大小不一样？（我必须有绝对位置，因为我要覆盖两个图像）

我做错了什么？

<div style="position: relative; float: left; width: 300px; background: red; border: 10px solid red">
    <div id="holder" style="position: relative;">
        <div style="position: absolute; left: 0px; top: 0px; background: green">
            <img src="image" width="100" height="100"></div>
        <div style="position: absolute; left: 0px; top: 0px; background: green">
            <img src="overlay" width="100" height="100"></div>
    </div>
</div>

【问题讨论】：

你到底想达到什么效果？如果不知道这一点，我们不可能告诉你你做错了什么。
外层 div 上没有指定高度的任何原因？由于您的内部元素是绝对定位并从文档的正常流程中删除的，因此外部 div 不知道它们有多大。
和我在描述中所说的差不多！我有两个重叠的图像，它们位于浮动 div 中，我希望该 div 拉伸到图像的大小。
您了解它们的绝对定位以及“从文档的正常流程中删除”是什么意思吗？
没有必要诉诸讽刺或类似的东西，@TheBounder。你有两个绝对定位的图像，但为什么它们都需要是绝对的？当然，如果它们的大小相同（在本例中就是这样），您可以定位一个相对的和一个绝对的，不是吗？

标签： html liquid-layout

【解决方案1】：

您需要为持有人 div 提供与图像相同的高度。我假设您有一些特定的两个重叠图像，因此您知道它们的大小。

【讨论】：