css - 使用@mediaquery 隐藏/显示 div

Question

我有一个 3 列的幻灯片，并在用户使用移动设备查看网站时隐藏 2 列。这很有效，我尝试添加另一个 col，然后决定不添加。从那以后这就不起作用了，我似乎不明白为什么。

我的代码:

<div id="rightCol">
    <div class="slideshowR">
        <img src="../images/slideshow/kettle.jpg">
        <img src="../images/slideshow/zucchini-flower.jpg">
        <img src="../images/slideshow/truffle.jpg">
    </div>
</div>

CSS:

.slideshowR {
    height: 370px;
    width: 250px;
    margin: auto;
}   

#leftCol {
    width: 205px;
    float: left;
    margin: 0;
    padding: 0;
    display: none;
}

#centerCol {
    width: 150px;
    float: left;
    margin: 0;
    padding-left: 10px;
    display: none;
}

#rightCol {
    width: 250px;
    float: left;
    margin: 0;
    padding-left: 10px;
}

@media only screen and (min-width: 769px) {
    #leftCol {
        display: block !important;
    }

    #centerCol {
        display: block !important;
    }

    #rightCol {
    }
}

Answer 1

我会这样做

#leftCol {
    width: 205px;
    float: left;
    margin: 0;
    padding: 0;
}

#centerCol {
    width: 150px;
    float: left;
    margin: 0;
    padding-left: 10px;
}

#rightCol {
    width: 250px;
    float: left;
    margin: 0;
    padding-left: 10px;
}

/* hide center and left in mobile */
@media only screen and (max-width: 769px) {
    #leftCol, #centerCol {
        display: none;
    }
}