Question

如何动态地将可滚动Div2内的Div1宽度更改为Div2的宽度。检查这个Jsfiddle http://jsfiddle.net/xdKrF/34/ 您将看到绿色背景在1点处停止（默认宽度大小）。我想将绿色背景的div扩展到整个可滚动的div。

重要的要求，TEXT绝不能改变，必须保持在1行。

有没有人有这个简单的解决方案？我能想到的复杂/ hacky解决方案是可滚动的，具有1000％的宽度，当它不可滚动时，它将是默认/ 100％。使用@media。

HTML

<div id="container" style="overflow:auto">
<div id="content">
    Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>

CSS

#content{
white-space:nowrap;
background:green;
}

Answer 1

可能会有更好的答案，但它正在发挥作用。只需将display:table;添加到#container http://jsfiddle.net/xdKrF/36/

即可

Answer 2

好的，我找到了解决方案。

包装容器并为其应用float:left;。

http://jsfiddle.net/2ugbkb6r/

Answer 3

以下是代码：（ JS Fiddle）

#content{
    white-space:nowrap;
    background:green;
}
#container {
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    word-wrap: break-word;    
}

<div id="container">
    <div id="content">
        Well hello
    </div>
    <p>
        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    </p>  
</div>

如何动态地将可滚动Div2内的Div1宽度更改为Div2的宽度

3 个答案: