div相邻并防止换行(仅使用css)

Question

我有3个div: suiteBar 2。 ribbonMain 3。 ribbonSub

我喜欢用下面的方式显示div:

DIV1 (suiteBar): right(没有指定宽度)

DIV2 (ribbonMain):与DIV1在同一行(width: 100%)

DIV3 (ribbonSub):低于DIV1+DIV2的宽度

这可能吗?每次当我给我的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

不要浮动div:

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

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

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

Answer 2

右边使用overflow:hiddendiv: 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;
}

Answer 3

检查这个提琴。

I use position.

这个方法也很有效。

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