响应格，而不影响中心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