全宽输入在div

本文介绍了全宽输入在div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有可能，在 width：calc（...）或 flex 具有输入 #what 以使用其父的全部宽度 #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>