ヘッダー応答デザイン

Question

私は右隣に左サイドのロゴと検索ボタンでsearchformを含んで私のウェブサイト上のヘッダを、コード化されています。デスクトップビューはかなりいいですが、モバイルデバイス（レスポンシブデザイン）では動作しません。目標は、ロゴ、検索バー、検索ボタンが常にモバイル上でヘッダーの100％の幅を使用することです。

赤いボックスは、検索バーと検索ボタンの横にあるロゴである必要があります。私は、ロゴがe.xであることに応答して、パーセント幅を処理するのに大きな問題があると思います。 20％の幅と70％の検索バーと30％の検索ボタンを備えた検索コンテナ80％を含む。

問題は、モバイル検索バーの休憩...検索バーの下の[検索の休憩に、何でも私はCSSで行うこと、です。私は、問題がどこにあるのか全く分かりませんでした。誰かが私にヒントを与えて、そのようなコードを書く方法を教えてください。左にコンテナ、右にコンテナを配置することは問題ありませんが、この特別なシナリオでは、左にコンテナ、右にコンテナを配置する必要があります。コンテナは2つの要素から構成されます。幅のパーセント値で作業します。

ありがとうございました！

Answer 1

任意のHTMLやCSSを見ずに、簡単な解決策はこれです：これで行くには、任意のHTML

https://jsfiddle.net/g1hgu0nh/

<div class="container"> 
    <div class="logo">logo</div> 
    <div class="search">Search</div> 
    <div class="search_button">Submit</div> 
</div> 

div { 
    float: left; 
} 

.container { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

.logo { 
    width: 20%; 
    background: red; 
    padding: 10px 5px; 
    margin: 0 1%; 
} 

.search { 
    width: 45%; 
    background: #333; 
    padding: 10px 5px; 
    margin: 0 1%; 
} 

.search_button { 
    width: 20%; 
    background: green; 
    padding: 10px 5px; 
    margin: 0 1%; 
}