एक पंक्ति में तीन divs सीएसएस

Question

<div id="firstRow"> 
    <div id="one">AAA</div> 
    <div id="two"><input style="width: 100%" type="search"></div> 
    <div id="three">AAAAAA</div> 
</div> 

मेरे पास तीन div एस है।

• मैं बाईं ओर one आईडी के साथ div तैरना चाहता हूं। div की चौड़ाई इसकी सामग्री पर निर्भर करेगी।
• मैं अपनी सामग्री में भी ऑटो चौड़ाई के साथ div दाईं ओर फ्लोट करना चाहता हूं।
• मुझे div आईडी दो के साथ सभी शेष स्थान लेने में होना चाहिए।

मैं मेज के साथ यह बना दिया है, लेकिन मैं div रों

<table> 
    <tr> 
     <td id="one">AAAAAAAAAAAAAAAAAAAAA</td> 
     <td id="two"><input style="width: 100%" type="search"></td> 
     <td id="three">AAAAAA</td> 
    </tr> 
</table> 

table { 
    width: 100%; 
} 

#one 
    width: auto; 
    height: 20px; 
    background-color: red; 
} 

#two{ 
    width: 100%; 
    height: 20px; 
    background-color: orange; 
} 

#three { 
    width: auto; 
    height: 20px; 
    background-color: green; 
} 

Answer 1

साथ यह चाहते हैं तो आप flexbox

#firstRow { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
#one { 
 
    background-color: red; 
 
} 
 

 
#two { 
 
    -webkit-flex: 1;  
 
    -ms-flex: 1;  
 
    flex: 1; 
 
} 
 
    
 
#three { 
 
    background-color: green; 
 
}

<div id="firstRow"> 
 
    <div id="one">AAA</div> 
 
    <div id="two"><input style="width: 100%" type="search"></div> 
 
    <div id="three">AAAAAA</div> 
 
</div>

Answer 2

साथ ऐसा कर सकते आम तौर पर नहीं है इसके लिए एक बिंदु क्योंकि, ठीक है , आपके पास टेबल हैं।

.table { 
 
    display:table; 
 
    width:100%; 
 
    border-spacing:2px; 
 
} 
 
.row { 
 
    display:table-row; 
 
} 
 
.cell { 
 
    display:table-cell; 
 
    padding:1px; 
 
} 
 
.cell,td { 
 
    white-space:nowrap; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell" style="background-color:#f88;">cell 1</div> 
 
     <div class="cell" style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></div> 
 
     <div class="cell" style="background-color:#88f;">cell 3</div> 
 
    </div> 
 
</div> 
 
<table style="width:100%;"> 
 
    <tr> 
 
     <td style="background-color:#f88;">cell 1</td> 
 
     <td style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></td> 
 
     <td style="background-color:#88f;">cell 3</td> 
 
    </tr> 
 
</table>