Question

我有一个我正在研究的网站，我正在尝试将其变成一个响应式网站，因此如果通过移动设备访问该页面，则所有内容都位于一列中。现在，我的两个元素只有响应。（我小提琴中的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%;
  }
}

我的小提琴：

http://jsfiddle.net/UQdYX/

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

Answer 1

好的，是的，我认为你的HTML需要一些改造。我理解这种困境 - 当你是动态布局的新手时，起初看起来有点困难。

我建议一个合理的可能性是这样的（这只是一个简单的解决方案，你可以希望扩展/改进你的目的）;

<div class="wrap">
    <div class="left_column">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="right_column">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS;

div.left_column,
div.right_column {
  float: left;
  width: 50%; }

@media (max-width: 640px) {
  div.left_column,
  div.right_column {
    float: none;
    width: 100%; }
}

这应显示为两列布局，直到浏览器窗口的宽度小于640像素，此时，它将更改为一列。

显然，您可以根据需要在左侧和右侧列中添加更多DIV。如果您想要更具体/更详细的示例，请告诉我。

Answer 2

我尝试将代码移到我的IDE中并在那里进行操作。但是如果没有一个真正的响应框架来测试它与@media（最小尺寸 - 最大尺寸）等，那将是困难的。但是我会给你指出明显的错误。使用浮动和边距来控制定位。

不要使用太多定位，特别是位置：绝对。它对反应原则起反作用。
观察您的div嵌套。看起来您的页面架构已关闭。坚持基础 <header><nav><section><aside><footer>等。
然后最终大量使用您的框架的预建尺寸。 Bootstrap将使用<span1><span2> <span3>...<span12> ...而bluprint将使用grid1，grid2，gri3 ... grid12等。这些预建尺寸中的每一个都允许您将div对齐到宽度为1200px。 e.g。

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

响应式站点不工作：CSS

2 个答案: