html - 响应站点不工作 : CSS

Question

我有一个我正在开发的网站，我正在尝试将其变成一个响应式网站，这样如果通过移动设备访问该页面，所有内容都位于一栏中。现在，我的元素中只有两个是响应式的。 (我的 fiddle 中的 200x150 图片)

所有其他图像在页面中心相互重叠。我试图使右侧面板上的两个图像(251x281 和 261x360)在(200x150)图像之后的一列中对齐，换句话说，使右侧的两个图像是最后两个元素这一页。这是我的媒体查询:

@media screen and (max-width: 768px){
   .events .events-plugin{
      max-width: 100%;
      display:block;
          width: auto;
          height: auto;
   }

     .img-wrap{
    width: 100%;
  }

  .container .slideshow{
      top: 5%;
  }
}

还有我的 fiddle :

http://jsfiddle.net/UQdYX/

我在这里做错了什么？任何帮助，将不胜感激。提前致谢。

Answer 1

我尝试将代码移至我的 IDE 并在那里运行。但是如果没有一个实际的响应式框架在它后面用@media(最小尺寸 - 最大尺寸)等来测试它是很困难的。但是我会给你指出明显的错误。使用 float 和边距来控制定位。

1. 不要使用过多的定位，特别是 position:absolute。这与响应原则适得其反。

2. 注意您的 div 嵌套。看起来您的页面架构已关闭。坚持基本原则 <header><nav><section><aside><footer>等
   

3. 然后最终大量使用框架的预构建大小。 Bootstrap 将使用 <span1><span2> <span3>...<span12> ...并且 bluprint 将使用 grid1、grid2、gri3...grid12 等。这些预建尺寸中的每一个都允许您将 div 对齐，使其宽度总和为 1200 像素。例如

<div class"span12">
<div class="span6></div>
<div class="span6></div>
</div>