Warum ist eines meiner Galeriebilder fehl am Platz?

Question

Hier ist ein Link zu meiner Website (zurzeit so sehr einfach jetzt im Gang Arbeit):

website

Ich kann einfach nicht herausfinden, warum ein Bild vermasselt. Es ist nicht einmal das letzte Bild in der Galerie und es hat die gleiche Größe wie alle anderen Bilder. Vielleicht fehlt mir das Offensichtliche, ich bin ziemlich müde.

Hier ist der Code: https://jsfiddle.net/b0r684hh/2/

HTML

<div class="row"> 
    <div class="col-lg-10"> 
     <h1 class="page-header">Ryk Design</h1> 
    </div> 
    <!--<div class="col-lg-2 page-header"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a class="invert" href="#">About</a> 
       </li> 
       <li> 
        <a class="invert" href="#">Contact</a> 
       </li> 
      </ul> 
     </div>--> 
    </div> 

    <div class="row"> 
    <div id="photos"> 
     <ul id="photo-gallery"> 
     <li> 
      <a href="img/DoomQuoteMed.png"> 
      <img src="img/thumbs/DoomQuoteThumb.png"> 
      </a> 
     </li> 
     <li> 
      <a href="img/crop/SlaveBlur.png"> 
      <img src="img/thumbs/SlaveBlur.png"> 
      </a> 
     </li> 
     <li> 
      <a href="img/love wins2.png"> 
      <img src="img/love wins2.png"> 
      </a> 
     </li> 
     <li> 
      <a href="img/rd.png"> 
      <img src="img/thumbs/rdcrop.png"> 
      </a> 
     </li> 
     <li> 
      <a href="img/crop/taplrCrop.png"> 
      <img src="img/thumbs/taplrCrop.png"> 
      </a> 
     </li> 
     <li> 
      <a href="img/cider.jpg"> 
      <img src="img/cider.jpg"> 
      </a> 
     </li> 
     <!--<li> 
        <a href="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg"> 
         <img src="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg"> 
        </a> 
       </li> 
       <li> 
        <a href="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg"> 
         <img src="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg"> 
        </a> 
       </li> 
       <li> 
        <a href="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg"> 
         <img src="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg"> 
        </a> 
       </li>--> 
     </ul> 
    </div> 
    </div> 

CSS

a, 
h2, 
h3 { 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
} 

h1 { 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    font-size: 92px; 
    text-transform: uppercase; 
    text-rendering: optimizeLegibility; 
} 

a { 
    color: #000; 
} 

.invert { 
    color: #fff; 
    background-color: #000; 
} 

.col-md-4 p { 
    padding-top: 5px; 
} 

a:hover { 
    color: #000; 
    background-color: #fff; 
    text-decoration: none; 
} 

.nav, 
.navbar-nav { 
    margin: 0; 
    padding: 0; 
} 

body { 
    margin: 0; 
} 

.page-header { 
    border: none; 
    padding-bottom: 40px; 
} 

footer { 
    margin: 50px 0; 
} 

.row { 
    padding-left: 0; 
} 

#photos { 
    opacity: .88; 
} 

#photos img { 
    width: 30%; 
    float: left; 
    display: block; 
    margin: 1px; 
} 

ul { 
    list-style: none; 
    margin: 0px auto; 
    padding: 10px; 
    display: block; 
    max-width: 100%; 
    text-align: center; 
} 

#overlay { 
    background: rgba(0, 0, 0, .8); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
    text-align: center; 
} 

#overlay img { 
    margin: 10% auto 0; 
    width: 550px; 
    border-radius: 5px; 
} 

#photos { 
    width: 100%; 
    padding: 10px; 
} 

#photo-gallery { 
    width: 100%; 
} 

Beifall für die Hilfe Jungs!

Answer 1

Sie sollten li Elemente statt img Elemente schweben, nur die CSS ändern,

Hier wird die jsfiddle aktualisiert

#photos li { 
    width: 30%; 
    float: left; 
    display: block; 
    margin: 1px; 
} 

#photos img { 
    max-width: 100% 
} 

Answer 2

Ihr Problem ist auf dem ersten Bild eine größere Höhe aufweisen als die anderen . Wenn Sie Ihre Bilder überprüfen, sehen Sie, dass alle 339 Pixel hoch sind - mit Ausnahme des ersten Bildes - 339,33 Pixel.

Da Sie Ihre Bilder schweben, wirft dieser sehr kleine Unterschied die Ausrichtung ab. Es wurden 2 Lösungen:

1) Stellen Sie alle Bilder die gleiche Höhe

2) Löschen des ersten Bildes jeder Reihe, so dass es die Ausrichtung zurücksetzt. So mit Ihrem Beispiel mit 3 Bildern über Sie das vierte Bild löschen möchte:

#photo-gallery li:nth-child(3n+1) img { 
    clear: left; 
} 

Answer 3

scheint sein das erste Bildhöhe 0,39 größer ist sie so schiebt sich um. Aber Sie sollten in der Lage sein, dies besser usw.

so etwas wie das könnte auch helfen. http://codepen.io/simondavies/pen/VaRBMo

<div class="image-outer-wrapper"> 
    <div class="image-wrapper CasinoLink"></div> 
    <div class="image-wrapper CorpLink"></div> 
    <div class="image-wrapper CasinoLink"></div> 
    <div class="image-wrapper CorpLink"></div> 
    <div class="image-wrapper CasinoLink"></div> 
    <div class="image-wrapper CorpLink"></div> 
    </div> 



    .image-outer-wrapper { 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    height: auto; 
    position: relative; 
    } 
    .image-outer-wrapper:before, 
    .image-outer-wrapper:after { content: " "; display: table;} 
    .image-outer-wrapper:after {clear: both;} 

    .image-outer-wrapper .image-wrapper { 
     margin:5px; 
     position: relative; 
       float: left; 
     width: 279px; 
     height: 237px; 
     text-decoration: none; 
     transition: background-position 500ms; 
     cursor: pointer; 
    } 

    .image-outer-wrapper .image-wrapper.CasinoLink { 
     background: url('http://placehold.it/558x237'); 
     background-position: 0 0; 
    } 
    .image-outer-wrapper .image-wrapper.CorpLink { 
     background: url('http://placehold.it/558x237'); 
     background-position: 0 0; 
    } 

    .image-outer-wrapper .image-wrapper:hover { 
     background-position: -279px 0; 
    }