Question

考虑<div>的父position:relative; width:100%。它包含<div>和<input>。我希望他们拥有100%宽度。

理想情况下<div>应该是固定的（它是自定义按钮），<input>应该填充宽度的其余部分（考虑窗口大小调整）。

是否可以在不涉及JS代码的情况下进行？

此外，它不是＆＃34;必须拥有的＆＃34;但我希望尽可能支持IE7 +。

CODE：

<div id="parent" style="position:relative; width:100%">
  <div id="button">Click</div>
  <input type="text" id="txt_input" />
</div>

澄清：
我当然可以使用javascript。如果没有一个优雅的解决方案，那么它就是JS。请告诉我。

Answer 1

在这种情况下，box-sizing：border-box会派上用场。我们假设您的按钮宽度为150px。

＆＃13;

<div id="parent" style="position:relative; width:100%; padding-left: 150px; box-sizing: border-box;">
    <div id="button" style="position: absolute; top: 0; left: 0; width: 150px">
        Click
    </div>
    <div>
        <input type="text" id="txt_input" style="width: 100%" />
    </div>
</div>

＆＃13;

Answer 2

您可以在不需要额外HTML元素的情况下执行此操作。对于现代浏览器，请使用flexbox。以下是flexbox http://caniuse.com/#feat=flexbox的浏览器支持列表。

#parent {
    display:flex;
}
#button {
  width:100px;
  background:red;
}
#txt_input {
  flex: 2;
}

<div id="parent" style="position:relative; width:100%">
  <div id="button">Click</div>
  <input type="text" id="txt_input" />
</div>

对于较旧的浏览器支持，您可以使用表格布局：

#parent {
  display:table;
}
#button {
  background:red;
  display:table-cell;
  width:100px;
}
#txt_input {
  display:table-cell;
  width:100%
}

<div id="parent" style="position:relative; width:100%">
  <div id="button">Click</div>
  <input type="text" id="txt_input" />
</div>

使div和输入宽度为父级的100％

2 个答案: