(首先:我已经尝试了涉及边距、边框等的所有选项。)
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;
}
值得注意的是，这发生在具有多个图像的唯一行下方。有问题的行中的图像高度相同，图像的组合宽度与上下行相同。我检查了几次。
我在另一个页面上做了同样的事情，但一点问题都没有:
这一页和另一页一样被分成许多部分，而且不止一处被破坏。但是，它看起来还不错，而另一个却有这个恼人的差距。
任何关于原因的想法将不胜感激!
最佳答案
删除所有 <br> <div class="puzzle"> 之间的元素元素。然后添加
clear: left
到.puzzle选择器。
关于css - 单独 div 中两行图像之间的空间，仅出现在一个特定行上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17385786/