css - 隣り合う DIV と改行の防止 (css のみ)

Question

3 つの DIV があります: 1. suiteBar、2. ribbonMain、3. ribbonSub

次の方法で DIV を表示するのが好きです。

DIV1 (suitBar) : 右 (特定の幅なし)

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

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;
}

Answer 2

リボン div をフロートしないでください:

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

#ribbon {
    background-color: Lime;
}

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

また要素をフロートするとブロック要素になるので、インラインにしても問題ありません。

Answer 3

このフィドルを確認してください。

I use position.

この方法もうまくいきます。

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