html - Auto Growing Div 在其他具有动态 float 内容的 Auto Growing Div 中

Question

有一个棘手的小问题:/我有一个绝对定位的 div，它没有宽度，因为内容是动态创建的。

在这个 div 中有另一个绝对定位的 div，同样没有宽度，因为内容是动态创建的。

在这个 div 中有两个动态创建内容的 float div，因此它们也不能有宽度。

我现在的问题是他们不想留在一条线上。相反，它看起来像这样:

http://jsfiddle.net/8dHQm/2/

 <div style="left: 100px; top: 200px; position: absolute; border: 1px solid green;">

        This is the main container<br />
        Here is some dynamically created content ...<br />
        ...<br />
        ...<br />
        ...<br />
        ...<br />
        ...<br />
        ...<br />

             <div id="test" style="left: 100px; top: 50px; position: absolute; border: 1px solid red;">

                <div style="float: left; border: 1px solid yellow; margin: 10px">
                    dynamically created content (float left)
                </div>

                <div style="float: left; border: 1px solid blue; margin: 10px">
                    dynamically created content (float left)
                </div>

            </div>

        </div>

但它应该是这样的，我添加了一个静态宽度，由于内容是动态的，所以我不能在现场这样做:

http://jsfiddle.net/EGfhy/

<div id="test" style="left: 100px; top: 50px; position: absolute; border: 1px solid red; width: 550px">

此外，在任何情况下我都无法更改 position:absolute :/我已经尝试了很多年了。有谁知道如何解决这个问题？

非常感谢:)

JB

Answer 1

您可以通过使用 display:inline-block 来实现此目的，如果您不介意放弃使用 float 。

我删除了 float:left来自你的两个<div>里面的元素#test ，然后添加此 CSS:

#test {
    white-space:nowrap;
}
#test > div {
    display:inline-block;
    zoom:1;
    *display:inline; /* For inline-block support in IE7 */
}

行内 block 自然会并排排列。 white-space:nowrap确保内联 block (实际上它们中的文本也是如此)即使父级自然不够宽也将彼此相邻 - 并相应地扩展父级(如果可能，否则它只会延伸出 parent )。

这是一个 updated JSFiddle这显示了它所取得的成就，我认为它看起来很像你的“工作但设置宽度”的 JSFiddle。我希望这就是您要找的!如果没有，请告诉我，我很乐意进一步提供帮助。祝你好运!