幅の書式の余白を埋めてください

Question

私のコード：https://jsfiddle.net/sf4g3v9n/

残りのスペースを埋めるように入力します。私はかなりこのサイトを検索しましたが、適切な答えを見つけることができませんでした。

重要：右のテキストは動的なので、絶対幅はありません。

私のHTML構造：

<div class="container"> 
    <form> 
    <div class="input-box"> 
     <input type="text" placeholder="search..." /> 
    </div> 
    </form> 
    <div class="selector"> 
    <p> 
     dynamic content 
    </p> 
    </div> 
</div> 

Answer 1

あなたはこのようflexbox使用してこれを行うことができます：あなたが入力が残りのスペースを埋めるためにしたいので

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 700px; 
 
    display: flex; 
 
} 
 

 
form { 
 
    float: left; 
 
    flex: 1; 
 
} 
 

 
form .input-box{ 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    width: 100%; 
 
} 
 

 
.selector { 
 
    float: right; 
 
} 
 

 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}

<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     dynamic content 
 
    </p> 
 
    </div> 
 
</div>

を、 flexboxはそれがまさにそれのために自然な選択肢です！

1. まず私はformとinput-boxが同じ行に滞在することを可能にするthis-を行うことによって、あなたのcontainerフレキシボックスを作った。だからここ

   は、私はあなたのコードにした変化です。

   .container { 
       width: 700px; 
       display: flex; 
   } 
   

2. は、それが残りのスペースにストレッチできるようにあなたのformにflex: 1を追加しました。

3. display: flexと指定したコンテナの直下の子にFlexbox 'flexing'が適用されます。だからあなたの内側のdiv input-boxもフレックスコンテナとして宣言しなければなりません。

4. ここでinputボックスの幅を100％に設定してください。

乾杯！

Answer 2

フレキシボックスには、それを行うことができます。

コメントは説明の方法論

Guide to Flexbox

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    /* create flex-container */ 
 
    margin-bottom: 1em; 
 
} 
 
form { 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.input-box { 
 
    display: flex; 
 
    /* new inner flex-container */ 
 
} 
 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}

<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem 
 
    </p> 
 
    </div> 
 
</div>