Bilder verhalten sich sehr seltsam

Mein Kumpel hatte ein Problem mit einer Website für ein Schulprojekt. Er wollte eine kleine Galerie machen.Bilder verhalten sich sehr seltsam

Die ersten 5 Bilder arbeitete als vorsätzliche: aber dann zeigte sie so nach oben: Wir alle möglichen Sachen für eine Stunde getestet. Wir haben versucht, die unteren 3 in einem anderen div Block mit class="bilder" zu setzen, aber es war das gleiche. Wir haben auch versucht, die Bilder in eine andere Reihenfolge zu bringen, um zu sehen, ob es etwas mit den Bildern selbst zu tun hat, aber auch das gleiche Ergebnis.

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>

Quelle

2017-01-05 Kekstastisch

es sieht gut aus in Ihrem Snippet, was ist das Problem? –

Es kann das Problem nicht reproduzieren –

beheben Sie Ihren Titel zu ** besser ** beschreiben Sie das Problem – vsync

Gerade folgende CSS verwenden:

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

Quelle

2017-01-05 13:01:08

Vielen Dank es repariert es! – Kekstastisch

Es geschieht, weil Sie alle Bilder schweben. Sie sollten keine Floats verwenden, um Bilder in der Zeile anzuzeigen. Anzeige inline-block ist genug.

Wenn Sie mit schwimmenden verwenden möchten clearfix nach Ende der Linie.

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

Quelle

2017-01-05 12:51:10 Kinga

Danke für die Hilfe, aber das repariert es leider nicht. Wenn wir Clearfix verwenden, erhalten wir genau das gleiche Ergebnis. Wenn wir Inline-Block verwenden, verhalten sich die unteren 3 Inages nicht mehr so, aber es gibt nie 5 Bilder in Folge und auf der rechten Seite ist viel Platz [link] (https://gyazo.com/7519ceae63bb9831a8347a16c2842a7b) – Kekstastisch

Sie können versuchen, die folgende HTML und CSS Struktur,

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>

Hoffe, es hilft.

Quelle

2017-01-05 13:05:14

Bilder verhalten sich sehr seltsam

Antwort

Verwandte Themen