響應格，而不影響中心DIV

Question

<div id="leftdiv" style="height:200px;width:15%;float:left"></div> 
<div id="centerdiv" style="height:200px;width:70%;float:left"></div> 
<div id="rightdiv" style="height:200px;width:15%;float:left"></div> 

這三個DIV 我需要leftdiv和rightdiv響應，但centerdiv保持在相同的位置

Answer 1

你的問題是缺乏的實際問題是什麼但任何真正的解釋基於你的演示鏈接，似乎你正試圖重寫內聯樣式。

這對於純CSS並不可行，因爲內聯樣式幾乎總是會贏得特定的戰爭。

最好將樣式作爲基礎樣式移動到樣式表中，然後根據媒體查詢進行更改。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
div { 
 
    height: 200px; 
 
    float: left; 
 
} 
 
#leftdiv { 
 
    background: red; 
 
    width: 15%; 
 
} 
 
#centerdiv { 
 
    background: blue; 
 
    width: 70%; 
 
} 
 
#rightdiv { 
 
    background: green; 
 
    width: 15%; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    #leftdiv { 
 
    background: red; 
 
    width: 5%; 
 
    } 
 
    #centerdiv { 
 
    background: blue; 
 
    width: 90%; 
 
    } 
 
    #rightdiv { 
 
    background: green; 
 
    width: 5%; 
 
    } 
 
}

<div id="leftdiv"></div> 
 
<div id="centerdiv"></div> 
 
<div id="rightdiv"></div>

JSfiddle Demo