Почему одно из моих изображений галереи неуместно?

Question

Вот ссылка на мой сайт (в настоящее время в стадии разработки, так очень простой прямо сейчас):

website

Я просто не могу понять, почему один образ перепутались. Это даже не последнее изображение в галерее, и это тот же размер, что и все другие изображения. Может быть, мне не хватает очевидного, я довольно устал.

Вот код: 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%; 
} 

Ура за помощь, ребята!

Answer 1

Вы должны плавать Li элементов вместо IMG элементов, просто изменить CSS,

Вот обновленный jsfiddle

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

#photos img { 
    max-width: 100% 
} 

Answer 2

Ваша проблема связана с первым изображением, имеющим большую высоту, чем другие , Если вы проверите свои изображения, вы увидите, что все они имеют высоту 339 пикселей - ЗА ИСКЛЮЧЕНИЕМ первого изображения - то есть 339.33.

Поскольку вы плаваете по своим изображениям, это очень незначительное отличие отбрасывает выравнивание. Там 2 решения:

1) Установить все изображения той же высоте

2) Удалить первое изображение каждой строки так, он сбрасывает выравнивание. Так что с вашим примером, имея 3 изображения через которые вы хотели бы, чтобы очистить 4th изображение:

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

Answer 3

его кажется первая высота изображения 0,39 больше так толкает их. Но вы должны быть в состоянии сделать это лучше и т. Д.

что-то подобное может помочь. 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; 
    }