Question

我在页面上的另一个div容器中有两个div。我想制作第一个div修复宽度和第二个div rsizable。

<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

试试这个。 https://jsfiddle.net/o7e5x0p0/2/

#first {
  width: 25%;
  height: 50px;
  float: left;
  background: red;
}

#second {
  float: left;
  height: 50px;
  width: 75%;
  background: green;
}

input {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 2

您可以使用 Flexbox 执行此操作。在flex: 1; div上使用#second时，右侧将占用剩余空间。 Fiddle

＆＃13;

#container {
  display: flex;
}

#first {
  width: 150px;
  background: blue;
}

#second {
  flex: 1;
  background: #939A9F;
}

#second input {
  width: 100%;
}

＆＃13;

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

＆＃13;

或者您可以使用 CSS表格执行此操作 Fiddle

＆＃13;

#container {
  display: table;
  width: 100%;
}

#first {
  width: 150px;
  background: blue;
  display: table-cell;
}

#second {
  background: #939A9F;
  display: table-cell;
}

#second input {
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 3

overflow: hidden div中的

将全部更改为input和width: 100% #first { width: 140px; height: 50px; float: left; } #second { overflow: hidden; } input { width: 100%; }：

{{1}}

jsfiddle-link

使右div可调整大小

3 个答案: