CSS - 即使行不完整，也可以使图像具有相同的大小

问题描述：

我想为导轨应用程序中的图像制作布局，而且我在对齐时遇到了问题。CSS - 即使行不完整，也可以使图像具有相同的大小

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的是要做到这一点的最好办法。我希望图像调整窗口大小，这就是为什么我有宽度：100％。

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

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

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

的jsfiddle

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

编辑：

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

我没有Instagram的，所以我在这里失去了一些图片，但如果你想将图像均匀调整，为什么不是一个简单的百分比宽度工作？ –

@JosephMarikle我希望所有行的所有图像尺寸完全相同。当一行只有两个图像时，它们比整行图像大得多，我不知道如何解决这个问题。 – user4584963

你尝试过使用'flex'属性（我想'flex：1 auto'）？像这里：https://jsfiddle.net/koys2ok6/ –

答

尝试老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; 
}

谢谢，我会修复一个编辑，但这并不回答主要问题。 – user4584963

答

你可以设置一个最大宽度上.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/

答

由于Fancybox通过它的JS进行尺寸调整，所以你会很难让它们完美。

从一些测试中，您可以随时设置静态宽度和高度，然后使用媒体查询更改大小。尽管这并不理想，但它似乎只适用于你所追求的效果。

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

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

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

    }

答

你真的需要这个标记吗？

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

jsFiddle

所有你需要的是

.pending-photo { 
    width: 32%; 
}

CSS - 即使行不完整，也可以使图像具有相同的大小

相关推荐