Question

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

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

Answer 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中的问题。（但是，我确实需要再次调整窗口大小以使其“跳回”。）

修改

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

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

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

评论中继续......

Answer 2

当我们调整大小时，带有id grid_clone的

ul越来越高：845px，因为它绝对位于底部，留下845px在顶部。是你使用的任何插件吗？

Answer 3

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

因此，如果你想要彼此相邻的元素，你将需要一个容器：

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

请务必给浮动div一个宽度，该宽度不得超过给定的空间。

Answer 4

重新安排您的内容结构，您需要将<ul>放在右侧栏的div上方。它们都设置为向左浮动，因此您希望左侧的元素是第一个。

编辑*

您的网格显示在无序列表中<ul>，该列表是在包含侧边栏的<div>标记之后创建的。我相信删除上述定位代码和不正确的浮动的组合将会解决你的问题。根据脚本为其分配的定位，<ul>甚至可能不需要浮动。

使用firebug玩游戏，你可能一开始就会遇到阻力，但对任何使用HTML和CSS的人来说都是必须的

在调整浏览器窗口大小时随机执行蹦极跳的图像

4 个答案: