CSS 扩展 div 右浮动 div答案

【问题标题】：CSS expand div right floated divCSS 扩展 div 右浮动 div
【发布时间】：2011-07-13 16:09:50
【问题描述】：

我有一个主要的div (purple) 用于这个 html 标头，它分为 2 个包含徽标 (red) 的其他 div 和右侧的一些其他信息（绿色）

我对 purple 有一个明确的解决方案，它使 red 和 green 都很好地浮动，两者都向左浮动。

这里的问题是我正在努力寻找一种方法使 green 适合整个宽度

在这种情况下，red 本身具有 199px 固定宽度，并且没有 green

的宽度声明

外部 purple div 也没有固定宽度，它目前是 body 的 65%，具有流畅的布局

所以我的问题是：如何使用 css 使 green div 扩展到 purple div 的末尾？

我尝试为 green 应用 width:86%，但由于 red 具有固定值，因此它不起作用...

我认为也许有一些表格显示模式，如 display:table-cell/table-row 或类似的东西可以解决问题，但它们似乎都没有按我想要的方式工作。

如果你能帮助我，那就太好了:)

【问题讨论】：

你的图片的链接坏了，你能把html放到jsfiddle.net吗？
@Graham Conzett 刚刚修复了这个链接，现在应该可以正常工作了......实际上，这种情况下的代码并不重要，您会发现它实现起来非常简单，但是如果您有任何问题请告诉我

【解决方案1】：

对于此类问题，这是我最喜欢的解决方案，奖励是它甚至不使用包装器，您可以添加其他列（尽管在您的情况下看起来需要包装，因为这看起来像一个标题):

您也可以非常简单地使用一个简单的浮点数：

【讨论】：

嘿格雷厄姆，感谢您的提示，但不幸的是，当您有多行时，这似乎不起作用。我刚刚在jsfiddle.net/W3DEC/2 更新了你的 sn-p 请注意，当正确的 div 有不止一行时，它似乎只有第一行浮动，第二行停留在下面:(如果我可以解决这个问题，我很确定我会一直使用它，同时我不得不采用tilleryj的答案，虽然不像他说的那么漂亮，但效果很好。
正确，从您的示例图像看来，这两个部分共享一个共同的高度，如果您只是隐式设置它可以工作：jsfiddle.net/W3DEC/3

【解决方案2】：

只需在红色 div 上使用 float: left 就可以了。

【讨论】：

【解决方案3】：

这可能不漂亮，但应该可以。

【讨论】：