CSS中连续三个div

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.

• 我想浮动divid one到左边.宽度div一取决于其内容.
• 我想浮动div三个自动宽度,也取决于其内容.
• 我希望div带有id的两个占用所有剩余的空间.

我用桌子做了但是我想用divs

<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>