我正在尝试在 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 是实现此目的的最佳方法。我希望图像在窗口调整大小时调整大小,这就是为什么我有宽度:100%。
但我遇到的问题是,当最后一行没有三个图像时,它们会稍微改变其大小,而我想保持图像大小相同。我希望所有行中的所有图像与整行中的图像大小相同。所有图像必须始终具有相同的尺寸。
我尝试删除行并让它成为一个大的 flex 盒,但也遇到了对齐问题。
如果您使用 Instagram,请找到最后一行照片未满的人。这是我想要的功能,但不知道他们是如何做到的。
jsfiddle
https://jsfiddle.net/kk7httso/11/
编辑:
实际上看起来我的问题是 Flex-box: Align last row to grid 的重复。我解决了插入空元素来填充行的问题,就像第一个答案所建议的那样。
最佳答案
您可以在.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
}
关于html - CSS - 即使行未满,也使图像大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36841666/