内部元素应该打破它的浮动以浮动自身

Question

我的 HTML 文档中有几个彼此相邻的 div 元素：

#quote
#keyword_tree
#sticky_keywords
#stats

我目前拥有所有 float: left 元素，并且它可以在大屏幕上运行。在#sticky_keywords 中，还有一些浮动元素，如果页面非常小，它们会正确地中断。问题是，如果包装器 (#sticky_keywords) 已经在其自己的一行上，它们只会分成几行。

在不指定静态宽度的情况下，如何才能将其打破，使其适合 #keyword_tree 旁边？

大屏幕

大http://wstaw.org/m/2011/12/17 /m48.png

小屏幕

小屏幕http://wstaw.org/m/2011/12/17/m49.png。

Answer 1

也许为#sticky_keywords添加一个max-width，以便它始终适合#keyword_tree？

Answer 2

有了这个，它的工作效果非常好：

#keyword_tree {
    float: left;
    width: 200px;
}
#sticky_keywords {
    overflow: hidden;
    margin-left: 240px;
}

因此关键字树是固定的（这是一种妥协），但另一个可以使用那里的所有空间。

它适用于 Firefox、IE9 和 Opera：

http://wstaw.org/m /2011/12/17/Auswahl_001_.png

但在 Chromium、Chrome 和 Rekonq 中表现不佳：

http://wstaw.org/m/2011/12/17/Auswahl_002.png< /a>

我不确定它是如何产生额外的 margin-right 的。