我有一个 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 {
}
}
最佳答案
我会这样做
#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;
}
}
关于css - 使用@mediaquery 隐藏/显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22689665/