ポジションのないレスポンシブなWebページメニュー：絶対または浮動

私は、検索バーとその隣に2つのボタンがあるメニューを含むウェブページを作っています。私は元のファイルにアクセスすることができないので、私はそれがどのように見えるのだろうか一緒に投げた。ポジションのないレスポンシブなWebページメニュー：絶対または浮動

HTML

<body> 
    <div class="container"> 
     <div class="left"> 
      <input type="text" /> 
     </div> 

     <div class="right"> 
      <input type="button" value="button1" /> 
      <input type="button" value="button2" /> 
     </div> 
    </div> 
</body>

CSS

body 
{ 
    margin:10%; 
} 
.container 
{ 
    display:inline-block; 
    position:relative; 

    height:100px; 
    width:100%; 

    border:1px solid black; 
} 
.left 
{ 
    display:inline-block; 
    width:80%; 
} 
.left input 
{ 
    width:100%; 
} 
.right 
{ 
    display:inline-block; 
    text-align:right; 
} 
.right input 
{ 
    height:30px; 
    width:30px; 
}

JSfiddleリンクhttps://jsfiddle.net/qzqb3xff/

基本的に起こることになっているものの両方のモバイルおよび様々なデスクトップ解像度であり、中にputテキスト（検索バー）は、コンテナdivの大部分を占有し、サイズが固定された2つのボタンのために十分なスペースしか残さず、コンテナの右端に常に2つのボタンが表示されなければなりません。しかし、サイトのモバイル版では、この上に異なるサイズの要素があるため、私はポジションアブソリュートを使用できません。また、浮動体をまったく使用することはできません。

出典

2017-11-30 WhatAmIDoing

あなたはcss 'calc（）'プロパティをチェックしましたか？これを見てくださいhttps://jsfiddle.net/3L6eyvyq/1/ –

さまざまな解像度で手動でメディアクエリを作成しましたが、このソリューションについては間違いなく質問します。 – WhatAmIDoing

Thisを使用すると、電話機やパソコン用の応答性の高いテーマを作成しようとしています。どのようにこれを使用するかについてのレッスンがあり、あなたがそれに慣れたときには、あなたがUR LIFEを保存しなければならないときには非常に簡単です。このプラグインは私に非常に多くの時間とエネルギーを節約しているので、私はそれを試してみることをお勧めし、それはurの問題を修正します。それが役に立てば幸い。

出典

2017-11-30 20:50:57

私は特にブートストラップを使用しないと言われていますので、実際にはこれを解決に使用することはできません。 Floatプロパティとスタイルシートライブラリは、私たちにとっては無意味です。 – WhatAmIDoing

ああ、今は分かりますが、残念ですが使用できません。申し訳ありませんが、私は助けになることはできませんでした。私は解決策を見つけようとします。 –

ポジションのないレスポンシブなWebページメニュー：絶対または浮動

答えて

関連する問題