Question

（首先：我已经尝试了所有涉及边距，边框等的选项。）

Link to similarly constructed, non-problematic page.

这是由几个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;
}

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

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

这个页面被分成了与另一个一样多的部分，它在多个地方被打破。但是，它看起来很好，而另一个有这个令人讨厌的差距。

非常感谢任何有关原因的想法！

Answer 1

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

clear: left

到.puzzle选择器。

enter image description here

在单独的div中的两行图像之间的空间，仅出现在一个特定的行上

1 个答案: