填充父div的剩余宽度（非flexbox或calc）

Question

.alert {
  position: absolute;
  right: 0;
  bottom: 20px;
  background: red;
  padding: 20px;
  min-height: 70px;
  min-width: 400px;
}
.alert-forgotPassword {
  margin-top: 10px;
  width: 100%;
  background: green;
}
.alert-forgotPassword-input-wrapper {
  float: left;
}
.alert-forgotPassword-input {
  width: 100%;
}
.alert-forgotPassword-button-wrapper {
  float: right;
}

<div class="alert">
  <div>
    <div class="alert-forgotPassword-input-wrapper">
      <input class="alert-forgotPassword-input" type="text" size="" placeholder="your.email@company.com">
    </div>
    <div class="alert-forgotPassword-button-wrapper">
      <button>Reset Password</button>
    </div>
  </div>

http://codepen.io/basickarl/pen/WwjEqy

上面的代码将div放在一起。我希望输入框的宽度为100％，以便它总是触摸按钮的一侧，例如下面。

示例如果父div被拉得更宽：

示例如果父div的宽度较小：

我希望有一个适用于ie9及以上的纯css / html解决方案，欢迎对结构进行更改！不过欢迎。

Answer 1

如果您不想使用flexbox，可以使用当前的HTML内容执行此操作：

<强> CSS

.alert-forgotPassword {
  margin-top: 10px;
  width: 100%;
  background: green;
}
.alert-forgotPassword-input-wrapper {
  overflow: auto;
  padding-top: 1px;
}
.alert-forgotPassword-input {
  width: 100%;
  box-sizing: border-box;
}
.alert-forgotPassword-button-wrapper {
  float: right;
  padding-left: 10px;
}

而不是输入包装器上的float: right，您可以使用overflow: auto，以便块可以尽可能多地占用空间。因此，无论父块的宽度如何，它的宽度都将适合父项左侧和按钮包装之间的空间。

按钮包装上的左边距允许在按钮和输入之间引入空格。它也适用于输入包装器上的右边距填充，或任何包装器上的边距。这只是个人偏好。

我在输入包装上添加了1px的顶部填充，只是为了对齐垂直输入和按钮。

输入上的box-sizing: border-box是必要的，因为您的输入有边框。如果没有它，宽度为100％，您的输入实际上将大于100％：其宽度将是容器的100％+边框的宽度。在这种情况下，overflow: auto会出现一个水平滚动条（因为内容会比容器大）。我们不想要一个丑陋的滚动条！

See Demo

Answer 2

这里使用display:flex完成了一些简化的标记。

.alert {
  position: absolute;
  right: 0;
  bottom: 20px;
  background: red;
  padding: 20px;
  min-height: 70px;
  min-width: 400px;
  display: flex;
  align-items: flex-start;
}
.alert > input {
  flex: 1 0 auto;
}
.alert > button {
  flex: 0 0 auto;
}

<div class="alert">
  <input type="text" placeholder="your.email@company.com">
  <button>Reset Password</button>
</div>

Answer 3

您可以为包装器添加宽度更改。文本框为70％，按钮为30％。

.alert-forgotPassword-input-wrapper {
  float: left;
  width: 70%;
}

.alert-forgotPassword-button-wrapper {
  float: right;
  width: 30%;
}