Question

我正在尝试建立一个网站，并且遇到了div'tile'的位置问题。这是我正在研究的网站： https://dl.dropboxusercontent.com/u/103417607/1/index.html 我是CSS和响应式编程世界的新手。我遇到的问题是右侧的“日期”图块，当调整窗口大小时，出于某种原因，这个图块会在“登录”图块下面爬行。我只是没有看到我做错了什么，因为我没有其他瓷砖。

你可以自己测试它bij慢慢地将浏览器窗口的右侧向左拖动（使宽度变小）。日期瓷砖将缓慢上升，而其他瓷砖（screenstar和最新消息）保持良好。我不明白这一点，因为我的css代码是相同的。

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

非常感谢任何帮助，这让我很头疼。

（我确实检查了de JQUERY马赛克的东西，但我不知道这是不是我的样子）

谢谢，马腾

Answer 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个像素。

<强> N.B。

两点：

1）我还没有在浏览器中测试这些样式，因此您可能需要根据您的设计正确调整top的{{1}}和right坐标

2）如果你想在更窄的视口宽度更改<div>的声明media query，你可能需要插入一个absolute position。

Answer 2

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

干杯。马腾

以马赛克风格定位div

2 个答案: