浮動小数点divの整列

Question

メインコンテナのdiv内に2つのdivがあります。最初のdivは固定幅/ 160px /を持ち、左に浮動小数点があり、2番目のdivには右に整列させるべきボタンしか含まれていないので、floatを右に設定します。 メインのdivはページ幅全体の25％の幅を持ち、私のアプリではブートストラップを使用しています。

paret divのwidhが両方のdivに収まるようになるまで、すべてうまく動作するので、右のものが左のものの下に移動されますが、この状況では/ center/second divを整列する方法がありますか？だから、両方のdivが一列に並んでいる場所では、親の中心に合わせる必要がありますが、同じ行にある場合は、最初と最後の2つの位置に合わせるか、最初のdiv /の160分の1を超えています何かアドバイスのため

多くのおかげで、 ピーター

EDIT： コンテナスタイル：width:25%;

/左/最初のdivのスタイル：float:left; widht:160px;

秒/右/ divのスタイル：margin-top:5px;

Answer 1

これを行う方法の例を示します。

#container 
 
{ 
 
    width: 25%; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
#left 
 
{ 
 
    width: 160px; 
 
    height: 5em; 
 
    background: green; 
 
    float: left; 
 
} 
 
#right 
 
{ 
 
    float: right; 
 
    height: 5em; 
 
    background: blue; 
 
} 
 
@media (max-width: 872px) 
 
{ 
 
    #right 
 
    { 
 
    float: none; 
 
    clear: both; 
 
    text-align: center; 
 
    } 
 
}

<div id='container'> 
 
    <div id='left'> 
 
    
 
    </div> 
 
    <div id='right'> 
 
    <button> 
 
     Button 
 
    </button> 
 
    </div> 
 
</div>

は、次の2つのdiv要素が同じ行に収まらないビューポートのサイズに設定したブレークポイントで、@mediaクエリを使用する必要があります。
は、その後、そのメディアクエリーに

float: none; 
clear: both; 
text-align: center; 

ヒントに右のdivを設定：フルページングコード・スニペットの結果を表示して、効果を確認するために、あなたのウィンドウのサイズを変更します。