css - div 底部的额外空白；溢出：隐藏有帮助，但会导致另一个问题

Question

我正在开发一个摄影作品集网站，该网站column-count用于创建 3x3 的图片网格（适用于大多数分辨率）。我的 div 设置如下：

<div id="photo-container">
    <div class="photo">
       <img src="photo1.jpg" />
       <div class="caption">Caption1 here</div>
    </div>
    <div class="photo">
       <img src="photo2.jpg" />
       <div class="caption">Caption2 here</div>
    </div>
    ... and so on until photo9
</div>

这是 div 的 css，减去我的页眉和页脚：

#photo-container {
    position: relative;
    float: left;
    width: 100%;
    clear: left;
    max-width: 1902px;
    -webkit-column-rule-width: 0px;
    -webkit-align-content: left;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
}

.photo {
    position: relative;
    float: left;
    line-height: 0px; /* to get rid of vertical gaps between rows */
}

.caption {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}

问题是我在最后一行图片之后留下了一个大的空白区域。在 Chrome 中检查元素表明它是photo-containerdiv 的一部分。这是这样的：

照片容器 div 中的空白

添加overflow:hidden到photodiv 可以消除空白；但是，caption中间列和右列的 div 被隐藏：

空白消失了，但隐藏了一些字幕

也许我在设置设计的方式上存在严重缺陷，但如果可能的话，我希望空白区域消失并显示所有标题。

提前感谢您的帮助。

Answer 1

“列”css 属性不是实现该布局的最佳解决方案。

尝试这个：

#photo-container {
    position: relative;
    float: left;
    width: 100%;
    clear: left;
    max-width: 1902px;
}

.photo {
    position: relative;
    float: left;
    width: 33.33%;
}

Answer 2

而不是使用列，为什么不将img设置为宽度的33.333％。

像这样：https ://jsfiddle.net/ouhvqo37/1/

.header, .footer{background-color: red; width: 100%; height: 50px; color: white; text-align: center;}
.footer{position: relative; float: left;}
#photo-container {
    width: 100%;    
    max-width: 1902px;
}
.photo {
    position: relative;
    float: left;
    width: 33.3333%;
}
img{width: 100%}
.caption {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}