@media查询响应CSS显示表阻止或内联消失与小屏幕 [英] @media query responsive CSS diplay table to block or inline disappearing with small screen

问题描述

UPDATED：简化代码：

在此示例中使用响应式CSS，display：table to block或inline使div消失。 href =http://jsfiddle.net/sebababi/434ja/1/ =nofollow> http://jsfiddle.net/sebababi/434ja/1/

  @media（max-width：767px）{
 #sidebar，#map_canvas，#main，＃header，＃nav {
 display ：block！important; 
} 
} 
  

UPDATED：
，而是应该作为div块，并堆积起来。所以，我做错了。当我检查控制台，它说它们仍然显示：表。

解决方案

媒体规则启动并删除表显示， position：absolute 启动并将元素移出屏幕。所以删除 position：absolute 或者做这样的事情：

  @ media only screen and（max-width：767px）{
 #sidebar，#map_canvas，#main，＃header，＃nav {
 display：block！important; 
 position：static; 
} 
} 
  

In this example with responsive CSS, the display:table to block or inline makes the div's disappear.

UPDATED: simplified the code: http://jsfiddle.net/sebababi/434ja/1/

@media(max-width:767px){
    #sidebar, #map_canvas, #main, #header,#nav {
      display:block !important;
    }
}

UPDATED: They shouldn't disappear, instead they should act as div blocks, and pile up. So, what am I doing wrong. when I check console, it says they are still display:table.

解决方案

Once the media rule kicks in and removes the table display, position: absolute kicks in and moves the elements off screen. So remove the position: absolute or do something like this:

@media only screen and (max-width:767px){
    #sidebar, #map_canvas, #main, #header,#nav {
      display:block !important;
      position: static;
    }
}

这篇关于@media查询响应CSS显示表阻止或内联消失与小屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！