CSS图像库（溢出问题）

我刚开始使用HTML和CSS为我的投资组合开发了一个更好的图像库，但由于图像显示在（看似）固定高度区域，一个垂直滚动时，我添加了很多缩略图。你可以在这里看到我的意思：http://www.joliverdesigns.co.uk（你可能需要缩小浏览器的宽度来查看滚动效果）。CSS图像库（溢出问题）

这里就是我成立了画廊的CSS：

#gall { 
    margin: 0 auto; 
    width: 70%; 
    padding: 90px 0 90px 0; 
    overflow: auto; 
} 

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: flex-start; 
    height: 100vh; 
} 

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 200px; 
    margin: 10px; 
} 

.gallery .gallery-item.filler{ 
    display: none; 
} 
.gallery.equalsize .gallery-item.filler{ 
    display: initial; 
    visibility: hidden; 
} 

.gallery-item img { 
    height: 100%; 
    width: 100%; 
    padding: 30px 30px 30px 30px; 
    display: block; 
}

我使用以下小提琴：https://jsfiddle.net/ev5nzm6o/5/计算器上找到。

我最喜欢的是画廊缩略图区域没有垂直滚动，但我无法让它增加高度，因此它可以容纳所有图像。我觉得我失去了一些明显的东西。

个人项目图库区域下面还有很多空白区域，其中只有四个缩略图。是否有可能减少该部分以下的空间量？

任何帮助或建议将不胜感激。请记住，我仍在通过反复试验来学习，但我希望能够做到这一点。：）谢谢。

来源

2017-07-02 J. Oliver Designs

在所有应有的尊重，帮助*只有你*不符合[so]的原则。如果您希望我们提供帮助，您需要***确保您的问题对未来用户有用***有类似问题。请使用片段工具在问题内部创建[mcve]。如果您在链接的网站上解决问题，您的问题将不会对未来的访问者有用。 –

为了摆脱overflow的，从.gallery删除

height: 100vh;

，它会默认为height:auto。

如果由于各种原因，您希望该部分的高度至少为100vh，请将height:100vh替换为min-height: 100vh。

#container99 { margin: 0 0 60px 0;} /* style.css:178 */
#container98 { margin: 40px 0 40px 0;} /* style.css:171 */
#gall { padding: 90px 0 90px 0; } /* style.css:134 */

每个加起来要么margin-bottom或padding-bottom，共计：

下面的 “个人项目” 额外的空间是从由那个空间。对这些元素的底部边距或填充属性设置较低的值，直到您对结果满意为止。

来源

2017-07-02 12:30:11

非常感谢您的回复，Andrei Gheorghiu！我会尝试编辑它今晚。我非常感谢你的帮助。我很抱歉不正确地发布这个问题（这是我第一次在这里发布，我相信我第一次在任何地方寻求CSS帮助！）。我会记住将来更好地提出我的问题。（你喜欢我编辑我的原始帖子，以更加友好的方式与其他类似的问题？） –

@J，没关系。但对于将来的问题，请使用片段工具添加[mcve]。如果你不这样做，那么一般的反应可能是负面的（低投票率问题，没有人花时间研究它）。 –

好的，谢谢你，很高兴知道。我不想在这里刺激任何人，因为我已经觉得自己有点新鲜。再次感谢您的帮助和时间。 :) –

CSS图像库（溢出问题）

回答

相关问题