css - DIV 彼此相邻并防止换行（仅使用 css）

Question

我有 3 个 DIV：1.suiteBar，2.ribbonMain，3.ribbonSub

我喜欢通过以下方式显示 DIV：

DIV1 (suiteBar) : 右（没有特定宽度）

DIV2（ribbonMain）：与DIV1在同一行（宽度：100％）

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

那可能吗？每次当我给我的 DIV2 一个 100% 的宽度时，它都会产生一个“换行符”......请参阅我的小提琴示例和代码：

http://jsfiddle.net/dkHZS/

    #topHeader { 
    display: block;
}
#suiteBar {
    background-color: Aqua;
    float: right;
    display: inline;
}
#ribbon {
    background-color: Lime;
    float: left;
    display: inline;
    width: 100%;
}
#ribbonSub {
    background-color: Gray;
}

<div id="topHeader">
  <div id="suiteBar">suiteBar</div>
  <div id="ribbon">ribbonMain
    <div id="ribbonSub">ribbonSub</div>
  </div>
</div>

Answer 1

检查这个小提琴。

I use position.

这种方法也很有效。

http://jsfiddle.net/hassaan39/NbX7P/

Answer 2

不要浮动功能区 div：

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

#ribbon {
    background-color: Lime;
}

http://jsfiddle.net/dkHZS/4/

此外，当您浮动元素时，它会变成块元素，因此将其设置为内联无关紧要。

Answer 3

overflow:hidden在右侧 div 上使用：http: //jsfiddle.net/dkHZS/6/

你可以这样做：

<div id="left">

</div>

<div id="right">

</div>

<div id="bottom">

</div>

CSS：

   #left{
float:left;
width: 90%;
 background: green;
    height:20px;
}
#right{

    overflow:hidden;
    background: blue;
    height:20px;
}
#bottom{
width: 100%;
float:left;
    background: red;
    height:20px;
}