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

响应div而不影响中心div

1 个答案: