div中的全宽输入

Question

如果没有width: calc(...)或flex（用于传统支持）有可能使用输入#what来使用其父项的全部宽度#b？

注意：全屏运行代码片段并重新调整浏览器的尺寸width以查看实际中的媒体查询。

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

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>