Question

我能够让这个工作在桌面上显示Left Ctr Right列，仅在移动设备上显示R.我现在想要做的是，失败的是，添加第4个col只会在手机上显示。所以桌面上的L，C，R，仅限移动设备上的第4列。我尝试在同一个div中使用第4个col但是它会隐藏在桌面上，但它不会在移动设备上显示。所以我创建了新的div id：“mobSlide”包含第4列，我隐藏/显示“mobSlide”div，但这也不起作用。有什么想法吗？

这是代码：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

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

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

CSS mobile： #leftCol，＃centerCol，＃rightCol { display：none; } #leftCol { 宽度：205px; 向左飘浮; 保证金：0; 填充：0; }

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

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

   #mobSlide {
      }

CSS桌面：

  #leftCol {
      display: block;
  }

  #centerCol {
      display: block;
  }
   #rightCol {
       display:block;
  }

   #mobSlide { display:none;
      }

Answer 1

考虑向您的帮助添加媒体查询; 如果您知道div应该显示的解决方案，请尝试以下方法：

@media all and (max-width: 600px){
    #mobSlider{
        display: block;
    }
}

更新：下面是一个jsfiddle样本来说明该示例（缩小并展开屏幕）

Answer 2

使用CSS移动更改：

#mobSlide {
    }

要：

#mobSlide {
    display: block;
}

媒体查询隐藏/显示div

2 个答案: