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>