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

我希望将标识为div的{{1}}浮动到左侧。 one的宽度取决于其内容。
我希望将div三个向右浮动，自动宽度也取决于其内容。
我希望id为2的div占用剩下的所有空间。

我已经使用了表格，但我希望它与div s

div

Answer 1

您可以使用 Flexbox

执行此操作

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

通常不会指出这一点，因为，你有桌子。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS中连续三个div

2 个答案: