1

(最初: マージン、境界線などを含むすべてのオプションを既に試しました。)

問題のあるページへのリンク。

同様に構成された、問題のないページへのリンク。

これは、いくつかの div と小さな画像で構成されています。この問題は、インベントリ ボックスに見られます。2 つの行の間にギャップがあります。

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 に答える