1

（第一：我已经尝试了所有涉及边距、边框等的选项。）

链接到有问题的页面。

链接到类似构造的无问题页面。

这由几个 div 和较小的图像组成。问题可以在库存箱中看到 - 两行之间存在间隙。

这是HTML：

<!DOCTYPE html>
<html>
   <head>
      <meta charset='UTF-8'>
      <link rel='stylesheet' type='text/css' href='../style.css'>
      <title>Open the door</title>
   </head>
   <body>
      <div class='puzzle'>
         <img src='images/lm1top.png' alt='img'>
      </div>
      <br>
      <div class='puzzle'>
         <!-- THE PROBLEM IS HERE! -->
         <img src='images/lm1left_top.png' alt='img'>
         <img src='images/lm1key.png' id='key' alt='img'>
         <img src='images/lm1_x.png' alt='img'>
         <img src='images/lm1_1.png' id='num' alt='img'>
         <img src='images/lm1right_top.png' alt='img'>
         <!-- END PROBLEM -->
      </div>
      <br>
      <div class='puzzle'>
         <img src='images/lm1mid_top.png' alt='img'>
      </div>
      <br>
      <div class='puzzle'>
         <img src='images/lm1door.png' id='door' alt='img'>
      </div>
      <br>
      <div class='puzzle'>
         <img src='images/lm1body.png' alt='img'>
      </div>
      <br>
</body>
</html>

这是样式表：

body
{
   background-color: black;
}

div.puzzle
{
   position: relative;
   float: left;
   left: 50%;
}

div.puzzle img
{
   position: relative;
   float: left;
   margin: 0px;
   left: -50%
}

p
{
   color: white;
   text-align: center;
}

div.hint p
{
   font-style: italic;
   font-size: 75%;
}

br
{
   clear: both;
}

值得注意的是，这发生在具有多个图像的唯一行下方。有问题的行中的图像都是相同的高度，并且图像的组合宽度与上面和下面的行相同。我检查了几次。

我在另一个页面上做了同样的事情，但完全没有问题：

这一页和另一页一样多，而且不止一处。但是，它看起来很好，而另一个有这个令人讨厌的差距。

任何关于原因的想法将不胜感激！

4

1 回答 1

1

删除<br>元素之间的所有<div class="puzzle">元素。然后加

clear: left

到.puzzle选择器。

在此处输入图像描述

于 2013-06-30T00:04:39.857 回答