Come rendere l'elemento riempire la larghezza rimanente, quando il fratello ha larghezza variabile?

Question

Nell'esempio sottostante:

voglio la casella di testo per riempire tutto lo spazio disponibile. Il problema è che la larghezza del dropdown non può essere risolta, poiché i suoi elementi non sono statici. Mi piacerebbe risolvere questo con solo css (non javascript se possibile).

ho provato le soluzioni proposte per questioni simili senza alcuna fortuna :(

Ecco il violino: http://jsfiddle.net/ruben_diaz/cAHb8/

Ecco il codice html:

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">General</option> 
       <option value="2">Fruits</option> 
       <option value="3">Ice Creams</option> 
       <option value="4">Candy</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

E qui il css:

#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-block; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 

Answer 1

Updated demo   (testato bene in IE7/8/9/10, Firefox, Chrome, Safari)

• Float gli elementi destro e sinistro.
• Nel codice sorgente HTML, inserire prima entrambi gli elementi floated (questa è la parte più importante).
• Fornire l'elemento intermedio overflow: hidden; e una larghezza implicita di 100%.
• Dare la casella di testo nell'elemento centrale una larghezza di 100%.

.category_dropdown_container { 
 
    float: left; 
 
} 
 

 
input[type="submit"] { 
 
    float: right; 
 
    ... 
 
} 
 

 
.resizable_text_box { 
 
    padding: 0 15px 0 10px; 
 
    overflow: hidden; 
 
} 
 
.resizable_text_box input { 
 
    width: 100%; 
 
}

<div class="category_dropdown_container"> 
 
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
 
     ... 
 
    </select> 
 
</div> 
 

 
<input name="commit" type="submit" value="Ask!" /> 
 

 
<div class="resizable_text_box"> 
 
    <input id="question_text_box" name="question[what]" 
 
      placeholder="Write a query..." type="text" /> 
 
</div>

Answer 2

Cambia alcune delle t tubo <span> elementi a <div> elementi; quindi float:left la divisione attorno al menu a discesa; quindi dare quello di destra un overflow:hidden e l'elemento di input al suo interno un width:100%;.

Here's an example. Here it is again with a bigger drop down.

---

Tranne che avvita il pulsante di invio. Quindi attribuisci il posizionamento non statico #form_wrapper (position:relative) e posiziona assolutamente il pulsante di invio. Vedi this fiddle e this one.

Answer 3

La relativamente recente proprietà di visualizzazione css 'flex' risolve questo problema per voi:

Tutto quello che dovete fare è di display-inline-flex modulo di modifica, dare .resizable_text_boxflex-grow: 100; e dare #question_text_boxwidth: 100%

F ull esempio dalla OP:

<style> 
#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-flex; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
    flex-grow: 100; 
} 
#question_text_box { 
    width: 100% 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 
</style> 

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">Options</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

Flex-box permette di fare ciò che si voleva fare con i CSS per 15 anni - il suo finalmente qui!Ulteriori informazioni: https://css-tricks.com/snippets/css/a-guide-to-flexbox/