1

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

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

在这个 div 中有两个带有动态创建内容的浮动 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">

另外我不能改变位置：在任何情况下都是绝对的：/我已经尝试了很多年了。有谁知道如何解决这个问题？

非常感谢 ：）

JB

4

2 回答 2

0

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

于 2013-08-09T12:01:42.243 回答
0

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联块（实际上也是其中的文本）将保持彼此相邻，即使父级自然不够宽 - 并将相应地扩展父级（如果可能，否则它只会延伸到父母）。

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

于 2013-08-09T16:02:31.423 回答