gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:19:12 26 4
gpt4 key购买 nike

(首先:我已经尝试了涉及边距、边框等的所有选项。)

Link to problematic page.

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选择器。

enter image description here

关于css - 单独 div 中两行图像之间的空间,仅出现在一个特定行上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17385786/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com