Question

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

我无法弄清楚为什么一张图片搞砸了。它甚至不是画廊中的最后一个图像，它与所有其他图像的大小相同。也许我错过了明显的，我很累。

HTML

declare module x ...

CSS

    <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>

为帮帮人干杯！

Answer 1

你应该浮动li元素而不是img元素，只需改变css，

以下是更新后的jsfiddle

extend

Answer 2

您的问题是由于第一张图片的高度比其他图片高。如果你检查你的图像，你会发现它们的高度都是339像素 - 除了第一张图像 - 一张是339.33。

由于您正在浮动图像，因此这种微小的差异会导致对齐。有2个解决方案：

1）将所有图像设置为相同的高度

2）清除每行的第一张图像，使其重置对齐。因此，在您的示例中，您想要清除第4张图像时会有3张图像：

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

Answer 3

似乎第一个图像高度是.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;
   }

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

3 个答案: