divと右寄せのdivを中心とする1つのdiv

Question

私は画面幅の100％のdiv要素（固定小数点）と固定位置を持っています。私はそれの中に2つのdivが必要です。最初の（検索バー）は親と中央の50％になります（達成されます）。2番目の（.cart）はスクリーンの右側にあります（そして親のdiv）[問題]。

HTML：

<div class="search"> 
    <div class="search-bar"> 
    <input type="text" id="searchbox" placeholder="Search"><button><i class="fa fa-search"></i></button> 
    </div> 

    <div class="cart"> 
    <i class="fa fa-shopping-cart"></i> 
    </div> 
</div> 

CSS：

.search { 
    position: fixed; 
    left: 0; 
    right: 0; 
    background-color: blue; 
} 

#searchbox { 
    color: #f0a830; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    background-color: #202020; 
    border-radius: 5px 0 0 5px; 
} 

.search-bar input { 
    width: 90%; 
} 

.search-bar button { 
    background-color: #202020; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    border-radius: 0 5px 5px 0; 
    width: 10%; 
} 

.cart { 
    display: inline-block; 
    color: white; 
    font-size: 32px; 
} 

私は.cart権利を浮動試してみたが、それは次の行に.cartを移動します。私はディスプレイを行った：インラインブロックとすべてのバリエーション。インラインブロックは、私が望む位置に移動することを可能にしますが、実際にはdiv内にはありません。もっと上に浮かぶように。親の権利になるにはどうしたらいいですか？

Answer 1

テキストインラインの中心を持つコンテナの内側にインラインブロックを使用することができます。

<div class="wrapper"> 
    <div class="rightalign">right content</div> 
    <div class="centeralign">center content</div> 
</div> 

<style> 
    .wrapper{ text-align:center; } 
    .centeralign, .rightalign { width:200px;height:100px; } 
    .centeralign{ display:inline-block;background:#ccf; } 
    .rightalign{ float:right;background:#fcc; } 
</style> 

その他の解決策は、複数列のレイアウトを作成することです。