Question

我在网页中遇到标题时出现问题。它有几页，其中一页有几张大图。在那个特定的页面中，我观察到标题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位置是正确的，与所有其他页面中没有这些图片的那个相同，但是当我添加它移动的第三个。

Answer 1

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

要解决此问题，最简单的方法是使用

设计页面

html {
overflow-y:scroll;
}

这将确保页面上始终显示滚动条，页面大小不会因此而改变。

Answer 2

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

当添加其他div时，标题div会更改其位置

2 个答案: