html - 使右 div 可调整大小

Question

我在页面上的另一个 div 容器中有两个 div。我想让第一个 div 固定宽度，第二个 div 可变宽度。

<div id="container">
 <div id="first"></div>
 <div id="second">                    
       <input id="edit" />
 </div>
</div>

CSS:

#first {
            width: 140px;
            height: 50px;
            float:left;
        }
#second
        {
            position: absolute;
            left: 140px;
            width: 100%;
        }
#container {
        width: 100%;
        position:relative;
}

但在这种情况下，第二个 div 从右侧的容器中出来。如何使第二个 div 可调整大小从第一个 div 的右侧开始到容器的末尾。

Answer 1

您可以使用 Flexbox 来做到这一点。在 #second div 上使用 flex: 1;，它将占用右边的剩余空间。 Fiddle

#container {
  display: flex;
}

#first {
  width: 150px;
  background: blue;
}

#second {
  flex: 1;
  background: #939A9F;
}

#second input {
  width: 100%;
}

<div id="container">
 <div id="first"></div>
 <div id="second">                    
      <input type="text">
 </div>
</div>

或者您可以使用 CSS 表格 Fiddle

#container {
  display: table;
  width: 100%;
}

#first {
  width: 150px;
  background: blue;
  display: table-cell;
}

#second {
  background: #939A9F;
  display: table-cell;
}

#second input {
  width: 100%;
}

<div id="container">
 <div id="first"></div>
 <div id="second">                    
      <input type="text">
 </div>
</div>