为什么我的画廊图片之一不合适？

Question

这是我网站的 link（目前正在进行的工作非常基础）：

我只是想不通为什么一张图片乱七八糟。它甚至不是图库中的最后一张图像，而且它与所有其他图像的大小相同。也许我错过了显而易见的，我很累。

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

您的问题是因为第一张图片的高度比其他图片高。如果你检查你的图片，你会发现所有图片的高度都是 339px - 除了第一张图片 - 那一张是 339.33。

由于您是浮动图像，所以这种非常细微的差异会影响对齐。有 2 个解决方案：

1) 将所有图片设置为相同的高度

2) 清除每一行的第一张图像，以便重置对齐方式。因此，对于您的示例，如果有 3 张图片，您可能想要清除第 4 张图片：

#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;
   }

为什么我的画廊图片之一不合适？

Why is one of my gallery images out of place?

html

css

implementation