1

到目前为止我遇到的最神秘的问题。访问我目前正在设计的网站：http: //ftfranes.com/mliad2/

然后只需在页面加载后调整浏览器窗口的大小。您会注意到图像会立即跳到页面的下方。如果我告诉你我对造成这种情况的原因有任何线索，我会撒谎，所以我在这里求助于可能比我更聪明的人。

4

4 回答 4

1

在我看来，关于您的浮动容器，似乎有两个有问题的容器。两者都.sidebar-right-twitter占据.projects整个宽度，因此（包含您的缩略图）在它们应该并排时.projects被推到下方。.sidebar-right-twitter

.side-bar-right {
  float: right;
  margin-left: 705px;  /* Reduce a lot or omit entirely? */
  :
}

.projects {
  float: left;
  width: 940px;  /* Reduce to nearer 700px */
  :
}

对 CSS 进行这些更改似乎可以解决 Chrome 中的问题。（但是，我确实需要再次调整窗口大小以使其“跳回”。）

编辑

小跳跃的第2期...（H2似乎是一个红鲱鱼/巧合。）

当您调整窗口大小时，某些脚本将top:368px应用于#grid_clone. 这似乎将缩略图容器向下推得太远了。一个真正的技巧是margin-top:-28px;在 CSS 中应用这个元素来抵消这个额外的跳跃。

我怀疑您将需要同时应用margin-top:-28px;这两个元素，否则它们将无法对齐。

在评论中继续...

于 2012-04-05T13:42:17.030 回答
0

当我们调整大小时，具有 id grid_clone 的 ul 正在获取 top:845px，因为它绝对定位，它会在底部留下 845px。它是您正在使用的任何插件吗？

于 2012-04-05T13:16:28.493 回答
0

实际上这是一个css问题。#image-grid向左浮动以及.sidebar_right_twitter. 但是一个元素必须有足够的空间来浮动。如果不是，它将跳转到下一行。因此，通过调整窗口大小，div 不再有足够的空间并转到下一行。

因此，如果您想让元素彼此相邻浮动，您将需要一个容器：

<div id="myContainer">
    <div class="floatLeft">
    </div>
    <div class="floatRight">
    </div>
</div>

一定要给浮动 div 一个宽度，它不应该超过给定的空间。

于 2012-04-05T13:16:59.910 回答
0

重新排列你的内容结构，你需要把你<ul>的 div 放在右边栏的上方。它们都设置为向左浮动，所以你会希望左边的元素是第一个。

编辑*

您的网格显示在一个无序列表中 -<ul>它是在<div>包含侧边栏的标签之后创建的。我相信删除提到的定位代码和不正确的浮动的组合将解决您的问题。根据脚本分配给它的位置，它甚至可能<ul>不需要浮点数。

玩萤火虫，一开始你可能会抗拒，但对于任何使用 HTML 和 CSS 的人来说，它是必须的

于 2012-04-05T13:18:46.207 回答