非常に奇妙な挙動をしている画像

私のバディは学校のプロジェクトのウェブサイトに問題がありました。彼は小さなギャラリーを作りたがっていました。をしかし、彼らはそのように現れた：非常に奇妙な挙動をしている画像

最初の5つのピクチャが意図的として働いていた我々は時間のもののすべての種類をテストしました。我々はclass="bilder"と別のdivブロックの下の3つのものを入れようとしましたが、それは同じでした。我々はまた、それが写真そのものと何か関係があるかどうかを見るために、異なる順序で写真を載せようと試みたが、同じ結果を得た。

div.wrapper { 
 
    font-family: Calibri; 
 
    width: 100%; 
 
    float: left; 
 
    color: white; 
 
} 
 

 
h1 { 
 
    color: #F99F00; 
 
    text-align: center; 
 
} 
 

 
body { 
 
    background-color: black; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: black; 
 
} 
 

 
li { 
 
    float: left; 
 
    font-family: fantasy; 
 
    font-size: 120% 
 
} 
 

 
li a { 
 
    color: white; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: green; 
 
} 
 

 
.active { 
 
    backround-color: green; 
 
} 
 

 
li.selected a { 
 
    color: green; 
 
    display: block; 
 
} 
 

 

 
#tct { 
 
    
 
    top: 15%; 
 
    left: 5%; 
 
    padding: 1%; 
 
    color: #F99F00; 
 
    font-size: 200%; 
 
} 
 

 

 

 
div.bilder img { 
 
    padding: 1%; 
 
    width: 18%;  
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Counter-Strike: Global Offensive</title> 
 
    <link href="../css/waffenliste.css" rel="stylesheet" type="text/css"> 
 
    <link href="pictures/csgotab.png" rel="shortcut icon" type="image/x-icon"> 
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
     <div> 
 
      <h1>Counter-Strike: Global Offensive<h1> 
 
     </div> 
 
     <div> 
 
      <ul> 
 
       <li><a href="../index.html">Home</a></li> 
 
       <li class="selected"><a href="waffenliste.html">Waffenliste</a></li> 
 
       <li><a href="spray.html">Spray Patterns</a></a></li> 
 
       <li><a href="ueber.html">Über</a></a></li> 
 
       <li><a href="impressum.html">Impressum</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="tct"> 
 
      <p>Kaufbar f&uuml;r: T und CT</p> 
 
     </div> 
 
     <div id="t"> 
 
      <p>Kaufbar f&uuml;r: Terroristen</p> 
 
     </div> 
 
     <div id="ct"> 
 
      <p>Kaufbar f&uuml;r: Antiterroreinheit</p> 
 
     </div> 
 
     <div class="bilder"> 
 
     <img id="awp" src="pictures/awp.PNG"> 
 
     <img id="scout" src="pictures/scout.PNG"> 
 
     <img id="dual" src="pictures/dual.PNG"> 
 
     <img id="p250" src="pictures/p250.PNG"> 
 
     <img id="deagle" src="pictures/deagle.PNG"> 
 
     <img id="nova" src="pictures/nova.PNG"> 
 
     <img id="negev" src="pictures/negev.PNG"> 
 
     <img id="m249" src="pictures/M249.PNG"> 
 
     </div> 
 
     
 
</div> 
 
      
 
</body> 
 
</html>

出典

2017-01-05 Kekstastisch

あなたのスニペットで大丈夫ですが、何が問題なのですか？ –

問題を再現できません –

あなたのタイトルを修正してください**問題をより詳しく記述してください – vsync

ただ、CSS、次の使用：

div.bilder { 
    font-size: 0px; 
} 
div.bilder img { 
    padding: 1%; 
    width: 18%;  
    display: inline-block; 
    vertical-align: top; 
}

出典

2017-01-05 13:01:08

ありがとうございました！ – Kekstastisch

あなたはすべての画像を浮くので、それが起こります。あなたは、ライン上の画像を表示するために浮動小数点を使用します。ディスプレイinline-blockで十分です。

フローティングスティックを使用する場合は、最後にclearfixを使用してください。

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

出典

2017-01-05 12:51:10 Kinga

助けてくれてありがとうございますが、それは悲しいことにそれを修正しません。 clearfixを使用すると、まったく同じ結果になります。インラインブロックを使用すると、下位の3つのInaysはそれ以上動作しませんが、連続して5つのピクチャが存在せず、右側に多くのスペースがあります[https://gyazo.com/7519ceae63bb9831a8347a16c2842a7b ） – Kekstastisch

あなたは、次のHTMLとCSSの構造を使用して試すことができ、

section #imageGallery li { 
 
\t display: inline-block; 
 
\t margin: 20px; 
 
\t list-style: none; 
 
} 
 

 
section #imageGallery li div { 
 
\t width: 280px; 
 
\t height: 290px; 
 
\t color: black; 
 
} 
 

 

 

 
#imageGallery .one { 
 
\t background-image: url(/Images1.jpg); 
 
\t background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color:#f9f8f5; 
 
} 
 
#imageGallery .two { 
 
\t background-image: url(/Images2.jpg); 
 
\t background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color:#f9f8f5; 
 
} 
 
#imageGallery .three { 
 
\t background-image: url(/Images3.jpg); 
 
\t background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color:#f9f8f5; 
 
} 
 
#imageGallery .four { 
 
\t background-image: url(/Images4.jpg); 
 
\t background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color:#f9f8f5; 
 
} 
 
#imageGallery .five { 
 
background-image: url(/Images5.jpg); 
 
\t background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color:#f9f8f5; 
 
}

<section> 
 
      <ul id="imageGallery"> 
 
       
 
       <li> 
 
         <div class="Image one"> 
 
          
 
         </div> 
 
       </li> 
 
       <li> 
 
         <div class="Image two"> 
 
          
 
         </div> 
 
       </li> 
 
       <li> 
 
         <div class="Image three"> 
 
          
 
         </div> 
 
       </li> 
 
       <li> 
 
         <div class="Image four"> 
 
          
 
         </div> 
 
       </li> 
 
       <li> 
 
         <div class="Image five"> 
 
          
 
         </div> 
 
       </li> 
 
      </ul> 
 
     </section>

はそれがお役に立てば幸いです。

出典

2017-01-05 13:05:14

非常に奇妙な挙動をしている画像

答えて

関連する問題