Question

我有以下结构：

<div name="outerContainer" style = "background: green; overflow: auto">
    <div name = "innerContainer" style = "background: red">
        <div name = "content" style = "width: 150%; height: 20px"/></div>
    </div>
    <div name = "innerContainer" style = "background: yellow">
        <div name = "content" style = "width: 120%; height: 20px"></div>
    </div>
</div>

结果是红色和黄色div将覆盖其内容的最初可见部分，但是，当向右滚动时，它们的内容溢出（隐式溢出：可见）但它们保持100％宽度。为了使红色和黄色的innerContainer div覆盖整个内容，我需要更改什么？

内容div应该具有动态长度，并且可以被任何其他元素替换。在这种特殊情况下，可以通过将内容div的宽度赋予其容器来解决，但如果内容是没有定义宽度的元素，那么这将无效。

Answer 1

尝试：

HTML：

<div style = "background: green; overflow: auto;">
    <div class="child" style = "background: red">
        <div style = "height: 20px"></div>
    </div>
    <div class="child" style = "background: yellow">
        <div style = "height: 20px"></div>
    </div>
</div>

CSS：

.child{width:120%;}
.child:first-child{width:150%;}

Fiddle here.

div中div的内容，内部div宽度不会延伸

1 个答案: