Question

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

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

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

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

 <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">

另外我无法改变立场：在任何情况下绝对：/我现在已经尝试了很多年。有谁知道如何解决这个问题？

非常感谢：）

JB

Answer 1

除非它们具有设定的宽度，否则不能强制浮动线对齐。那是花车的重点。它们将根据元素的大小“浮动”。您可以尝试使用min-width属性。这将迫使元素至少具有一定的大小。如果将其设置为元素排列所需的最小宽度，则它应该适用于任何内容。当然，如果你的元素太大，那么布局可能会再次改变，所以你可能也需要设置max-width。我还建议使用这些值的百分比来使事情变得灵活。请注意，您还需要在父元素上设置这些属性才能使其正常工作。

Answer 2

如果您不介意放弃使用浮动广告，可以使用display:inline-block来实现此目的。

我从float:left内的两个<div>元素中删除了#test，然后添加了这个CSS：

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

内联块自然会排列在一起。 white-space:nowrap确保内联块（实际上也是它们内部的文本）将保持彼此相邻，即使父级天然不够宽 - 并相应地扩展父级（如果可能，否则它' ll只是扩展出父母。）

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

自动增长Div在其他自动增长的Div中具有动态浮动内容

2 个答案: