html - @media 查询响应式 CSS 显示表以阻止或内联小屏幕消失

Question

在这个使用响应式 CSS 的示例中，要阻止或内联的 display:table 会使 div 消失。

更新:简化代码: http://jsfiddle.net/sebababi/434ja/1/

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

更新:它们不应该消失，而应该充当 div block 并堆积起来。那么，我做错了什么。当我检查控制台时，它说它们仍然显示:表格。

Answer 1

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

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