div中的全宽输入

Question

是否可以在没有width: calc(...)或flex（传统支持）的情况下让输入#what使用其父#b的全宽？

注意：全屏运行代码段并重新标记浏览器width以查看正在运行的媒体查询。

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}
#a {
  float: left;
  background-color: red;
  width: 150px;
}
#b {
  background-color: blue;
}
#c {
  float: right;
  width: 40%;
  background-color: yellow;
}
#icon {
  background-color: black;
  width: 20px;
  display: inline-block;
}
#what {}@media (max-width: 600px) {
  #c {
    width: 100%;
  }
}

＆＃13;

<div>
  <div id="a">a float</div>
  <div id="c">c float or not</div>
  <div id="b">
    <div id="icon">s</div>
    <input id="what" value="Blah" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用CSS tables，因为您不想使用calc()或flexbox，

由于我忘记了媒体查询，因此我使用了@GCyrillus

中的评论中给出的代码

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box
}
.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#a {
  background-color: red;
  width: 150px;
  display: table-cell
}
#b {
  background-color: blue;
  display: table;
  width: 100%
}
#c {
  width: 40%;
  background-color: yellow;
  display:table-cell
}
#icon {
  background-color: green;
  display: table-cell;
}
#what {
  display: table-cell;
  vertical-align: top;
  width: 100%
}
@media (max-width: 600px) {
  #c {
    width: 100%;
    display: table-caption;
    caption-side: bottom;
  }
}

<div class="table">
  <div id="a">a float</div>
  <div id="b">
    <div id="icon">s</div>
    <input id="what" value="Blah" />
  </div>
  <div id="c">c float or not</div>
</div>