Full width input in a div

问题

Is it possible, without width: calc(...) nor flex (for legacy support) to have the input #what to use full width of its parent #b ?

Note: Run the code snippet in full-screen and re-dimension the browser width to see the media query in action.

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

回答1:

You can use CSS tables because you don't want to use calc() nor flexbox,

Since I forget the media query I used the code given in comments by @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>

来源：https://stackoverflow.com/questions/37239774/full-width-input-in-a-div

标签

html

css

css-float