全宽输入在div [英] Full width input in a div

问题描述

有可能，在 width：calc（...）或 flex 具有输入 #what 以使用其父<1>的全部宽度 #b ？

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

请注意：以全屏方式运行代码段，并重新调整浏览器 width 的大小以查看正在执行的媒体查询。

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>

推荐答案

您可以使用 CSS表，因为您不想使用 calc（） flexbox ，

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

由于我忘记了媒体查询，我使用的评论中给出的代码 @GCyrillus

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>

这篇关于全宽输入在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！