我有一个我正在开发的网站,我正在尝试将其变成一个响应式网站,这样如果通过移动设备访问该页面,所有内容都位于一栏中。现在,我的元素中只有两个是响应式的。 (我的 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 :
我在这里做错了什么?任何帮助,将不胜感激。提前致谢。
最佳答案
我尝试将代码移至我的 IDE 并在那里运行。但是如果没有一个实际的响应式框架在它后面用@media(最小尺寸 - 最大尺寸)等来测试它是很困难的。但是我会给你指出明显的错误。使用 float 和边距来控制定位。
不要使用过多的定位,特别是 position:absolute。这与响应原则适得其反。
注意您的 div 嵌套。看起来您的页面架构已关闭。坚持基本原则
<header><nav><section><aside><footer>
等然后最终大量使用框架的预构建大小。 Bootstrap 将使用
<span1><span2> <span3>...<span12>
...并且 bluprint 将使用 grid1、grid2、gri3...grid12 等。这些预建尺寸中的每一个都允许您将 div 对齐,使其宽度总和为 1200 像素。 例如
<div class"span12">
<div class="span6></div>
<div class="span6></div>
</div>
关于html - 响应站点不工作 : CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22332376/