Question

我正在尝试在我的rails应用中制作图像布局，但我在对齐方面遇到了麻烦。

HTML

<div class="photos">
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
         <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
      </div>
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
      </div>
</div>

CSS

.photos {
  display: flex;
  flex-direction: column;
  border: 10px solid goldenrod;
}

.photo-row {
  border: 5px solid red;
  display: flex;

}

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px;  
}
.photo-wrapper:last-child {
    margin-right: 0;
}

.pending-photo {
  width: 100%;
}

我认为flexbox是最好的方法。我想在Windows调整大小时调整图像大小，这就是为什么我有宽度：100％。

但我遇到的问题是，当最后一行没有三个图像时，它们会稍微改变它们的大小，我想保持图像的大小相同。我希望所有行中的所有图像都与整行中的图像大小相同。所有图像必须始终具有相同的大小。

我尝试删除行，只是让它成为一个大的flexbox，但也遇到了对齐问题。

如果您使用Instagram，请找到最后一排照片未满的人。这是我想要的功能，但无法弄清楚他们是如何做到的。

的jsfiddle

https://jsfiddle.net/kk7httso/11/

编辑：

实际上我的问题看起来像是Flex-box: Align last row to grid的副本。我解决了插入空元素以填充行的问题，就像第一个答案那样。

Answer 1

您可以在.photo-wrapper

上设置最大宽度

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px; 
  max-width:calc(33.3333% - 20px); //one third minus the 20px margin
  box-sizing:border-box; // include the borders in the sizing
}

https://jsfiddle.net/kk7httso/23/

Answer 2

你真的需要那个标记吗？

如果你保持最低限度，那么它变得非常简单。不过，如果你想要所有这些边界，你不需要所有这些divs。

<强> jsFiddle

你需要的只是

.pending-photo {
  width: 32%;
}

Answer 3

尝试旧css

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px;

  &:last-child {
    margin-right: 0px;
  }  
}

进入新的CSS

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px;  
}
.photo-wrapper:last-child {
    margin-right: 0;
}

Answer 4

由于Fancybox通过它的JS进行大小调整，你将很难完美地完成它。

通过一些测试，您始终可以设置静态宽度和高度，然后使用媒体查询来更改大小。虽然这不是理想的，但它是唯一似乎对你正在追求的效果起作用的东西。

/* Main image size */
    .pending-photo {
      height:100px;
      width:100px;
    }

/* Mobile image size */
    @media (max-width:767px){

    .pending-photo {
      height:75px;
      width:75px;
    }

    }

CSS - 即使行不满，也可以使图像大小相同

4 个答案: