以马赛克风格定位 div答案

【问题标题】：positioning divs in mosaic style以马赛克风格定位 div
【发布时间】：2015-02-25 18:09:38
【问题描述】：

我正在尝试建立一个网站，但遇到了 div 'tile' 位置的问题。这是我正在处理的网站： https://dl.dropboxusercontent.com/u/103417607/1/index.html 我对 CSS 和响应式编程世界还很陌生。我遇到的问题是右侧的“日期”图块，当调整窗口大小时，由于某种原因，该图块爬到了“登录”图块下方。我只是看不出我做错了什么，因为我在其他瓷砖上没有这个。

您可以自己测试一下，bij 将浏览器窗口的右侧慢慢拖到左侧（使宽度变小）。日期图块会慢慢爬升，而其他图块（屏幕明星和最新消息）则保持完好。我不明白这个，因为我的css代码是一样的。

这是我的 CSS 文件： https://dl.dropboxusercontent.com/u/103417607/1/css/style.css

任何帮助将不胜感激，这让我很头疼。

（我确实检查了 de JQUERY 马赛克的东西，但我不知道这是否是我正在寻找的东西）

谢谢，马丁

【问题讨论】：

标签： html positioning mosaic

【解决方案1】：

有问题的 div 具有以下 CSS：

#datequote_position_front {
    float: right;
    margin-top: -610px;
}

这告诉我们<div> 的上边缘比文档流中的正常位置低610px。

我们可以放心地假设<div> 的垂直位置直接受到文档流中出现在其上方的其他<div>s 的影响。

<div> 向上浮动的原因是，当您减小视口的宽度时，您的水平菜单会消失。

我还没有检查，但我猜<div> 上升的像素数正好等于水平菜单的高度。

因此，防止<div> 的垂直位置发生变化的解决方案是使用另一种方法来定位<div> - 即。与文档流中的其他元素无关的元素。

例如：

#datequote_position_front {
    position: absolute;
    top: 610px;
    right: 6px;
}

这意味着<div> 将始终绝对定位在其父级上边缘下方 610 像素处和其父级右侧边缘左侧 6 像素处。

注意

两点：

1) 我没有在浏览器中测试过这些样式，因此您可能需要根据您的设计正确调整<div> 的top 和right 坐标。

2) 如果您想在更窄的视口宽度上更改 <div> 的声明 absolute position，您将（可能）需要插入 media query。

【讨论】：

非常感谢您的回答。但是，您知道为什么左侧“最新消息”和“屏幕明星”的其他图块不受菜单移除的影响吗？
我将更多地尝试绝对定位，我只是不明白如何使用媒体查询来解决它，因为磁贴每个像素向上移动像素行。我不明白为什么其他也使用“margin-top”语句的图块不向上流动......
@ST Graveyard - 据我所知，虽然其他 <div>s 没有表现出完全相同的行为，但在水平菜单消失时它们仍在向上跳跃。
是的，我明白了，但是所有其他图块的上升距离与上面的菜单完全相同。虽然有问题的 div 也这样做，但由于某种原因，它也开始逐个像素地向上移动。这个我不明白。我一直在尝试绝对定位，内联块......我似乎无法弄清楚。当您选择浏览器窗口的右侧并缓慢向左移动（使其变小）时，您会明白我的意思...
有几种方法可以完美地生成预期的响应式设计。一种是使用一系列浮动和清除（并在视口变得足够窄时更改声明）。第二种是绝对定位标题和水平菜单以及右侧垂直列，然后在页面左侧 66% 的剩余 <div>s 上使用浮动和清除。三是使用CSS3 flexbox模块。

【解决方案2】：

感谢这些提示，我能够解决这个问题： http://www.htmlforums.com/css/t-positioning-divs-in-mosaic-style-160801.html#post854724

干杯。马腾

【讨论】：