在移动平台上查看时，我试图让我的红色侧边栏div消失。我对媒体查询进行了编码，但它们只是移动到页面的底部而不是消失。任何帮助是极大的赞赏。顺便说一下，我不允许在这个项目上使用javascript。谢谢！
html, body {
background-color:#333;
font-family:Helvetica;
height:100%;
}
#column-left {
float: left;
width: 15%;
text-align:center;
background-color:#F00;
}
#column-right {
float: right;
width: 15%;
text-align:center;
background-color:#F00;
}
#column-center {
display: inline-block;
width: 70%;
text-align:center;
}
.banner {
width: 100%;
background-color:#000;
}
#logo {
width:10%;
}
nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
text-align:center;
}
nav ul {
display: table-row;
list-style:none;
border-top:1px solid white;
}
nav li {
display: table-cell;
margin: 0;
}
ul.menu a {
font-size: 85%;
display:block;
text-decoration:none;
padding:10px 25px;
background:#000;
color:#ffffff;
text-align:center;
white-space:nowrap;
text-shadow: 1px 1px 1px #000;
border:1px solid white;
}
ul.menu a:hover {
background-color: #FFF;
color: #F00;
border:1px solid black;
}
.image {
border:2px solid black;
border-radius: 7px 7px 7px 7px;
padding: 5px 5px;
margin-top:2%;
margin-bottom:2%;
background-color:white;
}
.heading {
font-size:24px;
text-shadow:0px 0px 10px #FFF;
}
.info {
background-color:#FFF;
border:2px solid black;
border-radius: 7px 7px 7px 7px;
padding: 10px 10px;
width: 75%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#navMenu {
width: 100%;
}
.sidebar {
width: 15%;
}
.image {
width: 75%;
}
#column-left !important{
float:none;
display: none;
}
#column-right !important{
float:none;
display: none;
}
@media screen and (max-width: 480px) {
body {
background-color: #333;
}
#header {
height: auto;
}
.heading {
font-size: 24px;
color: white;
}
#logo {
width: 40%;
}
#column-left !important{
float:none;
display: none;
}
#column-right !important{
float:none;
display: none;
}
#column-center {
width:100%;
}
nav {
max-width:100%;
}
<div class="banner">
<center><a href="#"><img src="../Week 1/Logo/Logo.png" id="logo" /></a></center>
</div>
<nav>
<ul class="menu">
<li><a href="#">Products</a></li>
<li><a href="#">Contest</a></li>
<li><a href="#">Coupons</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="column-center">
<center><img src="../Week 1/Images/Product/plexusinuse.png" width="40%" id="main" /></center>
<center><h1 class="heading">PlexiMax</h1></center>
<p class="info">PlexiMax is an aerosol based cleaner, specialized for use on plexiglass. PlexiMax lifts dirt and grime from the surface allowing it to be wiped away with ease. While it is suggested that a microfiber cloth is used with the product, simple paper towels will provide great results.</p>
<center><h1 class="heading">About Us</h1></center>
<p class="info">This webpage is devoted to the materials used to clean everything you may own with an engine. Whether it be a car, a boat, or a plane you will find everything you need to clean it here. We have brushes, soaps, even pressure washers. While we started selling our PlexiMax plexiglass cleaner, we have since branched off to sell many different cleaning solutions. PlexiMax is still our most popular product, but the convenience of finding everything you need here has changed the entire dynamic of our site. We hope you find everything you need and use our products to find that new vehicle shine.</p>
</div>
<div id="column-left">
<center><img src="../Week 1/Images/Other Products/brush.png" width="75%" class="image"/></center>
<br />
<center><img src="../Week 1/Images/Other
Products/carwashglove.png" width="75%" class="image" /></center>
<br />
<center><img src="../Week 1/Images/Other Products/carwashsoap.png" width="75%" class="image" /></center>
</div>
<div id="column-right">
<center><img src="../Week 1/Images/Other Products/microfibercloths.png" width="75%" class="image"/></center>
<br />
<center><img src="../Week 1/Images/Other Products/pressurewasher.png" width="75%" class="image" /></center>
<br />
<center><img src="../Week 1/Images/Other Products/wax.png" width="75%" class="image" /></center>
</div>
答案 0 :(得分：2)
你有一个非常简单的问题：你的!important位置错误：
http://jsfiddle.net/cn161gxf/3/
!important适用于单个属性，而不适用于元素。
而不是：
#column-left !important{
float:none;
display: none;
}
#column-right !important{
float:none;
display: none;
}
尝试：
#column-left{
float:none !important;
display: none !important;
}
#column-right{
float:none !important;
display: none !important;
}
**免责声明：除非绝对必要，否则请勿使用!important 。使用大量!important样式会使维护变得更难，因为您打破了样式表中的自然级联。
答案 1 :(得分：1)
您的CSS样式无效，原因是：
!important作为单独的属性。基本上，你的CSS样式无效：
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#navMenu {
width: 100%;
}
.sidebar {
width: 15%;
}
.image {
width: 75%;
}
#column-left {
float:none;
display: none;
}
#column-right {
float:none;
display: none;
}
}
@media screen and (max-width: 480px) {
body {
background-color: #333;
}
#header {
height: auto;
}
.heading {
font-size: 24px;
color: white;
}
#logo {
width: 40%;
}
#column-left {
float:none;
display: none;
}
#column-right {
float:none;
display: none;
}
#column-center {
width:100%;
}
nav {
max-width:100%;
}
}
http://jsfiddle.net/volter9/cn161gxf/1/
P.S。：下次你可以先尝试使用CSS验证器：http://jigsaw.w3.org/css-validator/