Question

请参阅this snippet。更新：答案看起来像this。

我希望#container元素足够大，可以包含#sometimes_shown图层，但它只能从#always_shown子图层获得它的大小。

position:absolute从流程中移除#sometimes_shown，当其他人遇到类似问题时，会提及标准的这一方面。

我的问题是：我可以在不使用position:absolute 的情况下创建相同的图层效果，从而在父级流逻辑中包含所有子图层的大小吗？

预先计算的宽度/高度/偏移量不是一个选项：它必须动态流动。我不接受任何包含除零之外的尺寸数字的解决方案。仅限CSS的解决方案是首选，与旧浏览器的兼容性不是优先级，jQuery / javascript解决方案是最后的选择。感谢。

Answer 1

您可以使用浮动。

Fiddle （我删除了测试的所有边距）

此解决方案需要更改一些html标记，您必须在margin-left: -100%;上使用#sometimes_shown。

工作原理：

将div放入包含width:50%;和float:left;的包装中，以便两个元素位于同一行。
将元素恢复为正常宽度，将width:200%;添加到#always_shown和#sometimes_shown
将margin-left: -100%;添加到#sometimes_shown，使其堆叠到容器的左侧
在容器底部添加一个带有div的虚拟clear:both;，以便它包裹浮动元素

以下是代码：

HTML：

<div id="container">
    <div class="wrap">
        <div id="always_shown">
            <p>I am always here 1. I am always here 2. I am always here 3. I am always here 4. I am always here 5. I am always here 6. I am always here 7.</p>
        </div>
    </div>

    <div class="wrap">
        <div id="sometimes_shown">
            <p>I am sometimes here</p>
             <p>Extra 1</p>
             <p>Extra 2</p>
             <p>Extra 3</p>
             <p>Extra 4</p>
        </div>
    </div>
    <div class="clr"></div>
</div>

CSS：

#container
{
    border: thin solid black;
}

#always_shown
{
    width: 200%; 
    color: red;
}

#sometimes_shown
{
    width: 200%; 
    margin-left: -100%;
    color: green;
}
.wrap{
    float:left;
    width:50%;
}

.clr{
    clear:both;
}

CSS创建图层而不使用position：absolute（使容器足够大，适用于所有图层）

1 个答案: