html - div中的全 Angular 输入

如果没有width: calc(...)或flex（对于传统支持），是否可以让输入#what使用其父#b的全宽？
注意：全屏运行代码片段并重新调整浏览器的大小，以查看正在运行的媒体查询。

* {
  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%;
  }
}

<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>

最佳答案

您可以使用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>

关于html - div中的全 Angular 输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37239774/