-1

我正在尝试建立一个网站，但遇到了 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 马赛克的东西，但我不知道这是否是我正在寻找的东西）

谢谢，马丁

4

2 回答 2

0

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

干杯。马丁

于 2015-02-25T10:09:38.033 回答
0

有div问题的有以下CSS：

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

这告诉我们，顶部边缘<div>比文档流中的正常位置低 610 像素。

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

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

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

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

例如：

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

这将意味着<div>将始终绝对定位在其父项的顶部边缘下方 610 像素处，以及其父项的右边缘左侧 6 像素处。

注意

两点：

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

media query2）如果您想更改较窄视口宽度的声明absolute position，您（可能）需要插入 a 。<div>

于 2015-02-23T14:42:42.563 回答