2つのdivを同じ行に整列させる方法

Question

いくつかのWebページでは、私はmiddlewrapperと呼ばれるメインdivを作成しました。これらはleftとmiddleの2つのdivを含んでいます。左のdivは特定のページでのみ使用され、必要な間隔を使い切りますが、中間のラッパーはミドラッパーの残りの間隔を使い切ります。左のときに、他のページで使用されていないものの、真ん中が使用されており、実施例がしかし、今私が欲しい

#middlewrapper \t { width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; } 
 
#left \t \t { float: left; width: 19%; margin: 0 6% 0 0; vertical-align: top; background: green; height: 100px; } 
 
#middle \t \t \t { width: auto; padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; }

<div id="middlewrapper"> 
 
    <div id="left"> 
 
    Test Left 
 
    </div> 
 

 
    <div id="middle"> 
 
    Test Middle 
 
    </div> 
 
</div>

を提供するmiddlewrapper

の100％まで使用しています中と右と呼ばれるdivを作成し、divを右に自然にプッシュしたいと考えています。しかし、私が何をしても、私はいつもdivを2つの別々の行に入れているように見えるので、私は運がない。

実施例では

#middlewrapper \t { width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; } 
 
#middle \t \t \t { width: auto; padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; } 
 
#right \t \t { float: right; width: 19%; margin: 0 0 6%; vertical-align: top; background: blue; height: 100px; }

<div id="middlewrapper"> 
 
    <div id="middle"> 
 
    Test Middle 
 
    </div> 
 
    <div id="right"> 
 
    Test Right 
 
    </div> 
 
</div>

Answer 1

#middlewrapper \t { 
 
    width: 1100px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    border: 0px solid #bbbbbb; 
 
    background: #ffffff; 
 
    overflow: hidden; 
 
    display: flex; // to make the children align 
 
} 
 

 
#middle { 
 
    flex: 1; // stretch to the available width 
 
    width: auto; 
 
    padding: 0; 
 
    background: #ffffff; 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
    background: red; 
 
    height: 100px; 
 
} 
 
#right { 
 
    width: 19%; 
 
    background: blue; 
 
    height: 100px; 
 
}

<div id="middlewrapper"> 
 
    <div id="middle">Test Middle</div> 
 
    <div id="right">Test Right</div> 
 
</div>

を提供ここでは、フレキシボックスでそれを行う方法ですされています。余分なスペースを確保するためには、フレックスを赤い容器に入れておく必要があります。

Answer 2

これは何か？

#middlewrapper { 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 
#right { 
 
    float: right; 
 
    background-color: blue; 
 
}

<div id="middlewrapper"> 
 
    <div id="right"> 
 
    Test Right 
 
    </div> 
 
    <div id="middle"> 
 
    Test Middle 
 
    </div> 
 
    
 
</div>