相邻的div并防止换行（仅限css）

我有三个div:1suiteBar，2ribbonMain，3ribbonSub

我喜欢以下列方式显示div：

第1部分（suiteBar）：右侧（无特定宽度）

DIV2（ribbonMain）：左与DIV1（宽度：100%）在同一行中

DIV3（ribbonSub）：在两个div的整个宽度上的DIV1+DIV2下

可能吗？每次当我给我的DIV2一个100%的宽度时，它会造成一个“换行”。。。请参见我在fiddle和code上的示例：

#topHeader{
显示：块；
}
#suiteBar{
背景色：浅绿色；
浮动：对；
显示：内联；
}
#丝带{
背景色：石灰；
浮动：左；
显示：内联；
宽度：100%；
}
#ribbonSub{
背景颜色：灰色；
}
suiteBar
里邦曼
ribbonSub

使用右侧div上的

溢出：隐藏

：

你可以这样做：

<div id="left">

</div>

<div id="right">

</div>

<div id="bottom">

</div>

---

不要浮动ribbon div：

#suiteBar {
    background-color: Aqua;
    float: right;
}

#ribbon {
    background-color: Lime;
}

此外，当您浮动一个元素时，它会变成一个块元素，所以将其设置为inline并不重要。

检查此小提琴

I use position.

这种方法也很有效

---

内联元素不能浮动-请指定一个或另一个。不是两个都有。通过给div2 100%的宽度，你怎么会在同一行中对齐另一个div？@Simon-你会想使用右边的溢出：hidden

div

。看看我贴的小提琴，我想这就是你要找的。如果没有，请告诉我，我会删除它。嗨，Evan，我已经用属性'overflow:hidden'尝试过了，但是DIV ribbonSub中的一些其他函数不再起作用了。。。所以使用“溢出：隐藏”属性对我来说是不可能的…谢谢你的回答。在小提琴上，这个例子是有效的。但是当我尝试在我的站点中使用它时，Ribbon DIV正在覆盖DIV suiteBar。。。你知道为什么吗？其他的都在发挥作用。很难猜测，也许游戏中还有其他的风格，这些元素会产生副作用。Css属性如position、float或z-index可能是一个源代码。如果我在Chrome、Firfox和IE9+中将“position:relative”替换为“position:static”，它对我有效。。。但在IE8中不是。。。有没有办法为IE8解决这个问题？

#suiteBar {
    background-color: Aqua;
    float: right;
}

#ribbon {
    background-color: Lime;
}

I use position.