1

我在使用网页标题时遇到了一些问题。它有几页，其中一页有几张大图。在那个特定的页面中，我观察到标题 div 向左移动了几个像素，这在页面之间切换时非常令人讨厌。

我知道当我删除第一张图片 (id="problem1") 或其中一个带有两张图片的 div ((id="problem2" 和 "problem3")) 时问题消失了，但我不知道是什么正在发生。

我正在使用这个 css 代码来生成两个列：

.contenedor { overflow: auto; }

.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}

这是标题：

#header {
    height: 100px;
    background: #0072b8;
    font-family: Arial;
    font-size: 16px;
    color: white;

}

这是神奇地改变其位置的标题：

<div id="header">
        <a href="home.html"><img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;"></a>
    </div>

这是定义具有两个列的 div 之一的代码：

<div class="contenedor">
    <div class="div1">
      <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>         
    </div>
    <div class="div2">
       <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>
    </div>
</div>

您可以在此处查看其余代码及其结果： JSFiddle

最让我困惑的是，如果我只留下2个有问题的元素，div位置是正确的，与所有其他没有这些图片的页面中的位置相同，但是当我添加第三个时移动。

4

2 回答 2

2

发生这种情况是因为您在某些页面上有滚动条，但在其他页面上没有滚动条，并且您的 DIV 元素设置为“自动”，因此它们扩展了可用的浏览器空间（我确信您知道在调整浏览器大小时会发生变化，或者在此滚动条的存在改变了可用空间的情况）。

要解决这个问题，最简单的方法是设计页面

html {
overflow-y:scroll;
}

这将确保滚动条始终在页面上，并且页面大小不会改变。

于 2012-11-14T15:42:31.163 回答
0

我相信问题在于您在问题页面上有一个滚动条。您的内容长于浏览器窗口的高度。当您的内容高于窗口时，页面会添加一个滚动条。这是不可避免的。

于 2012-11-14T15:24:57.183 回答