Div边框和定位

Question

我创建了一个包含网格布局的div，但边框没有正确包围它，除非我手动设置它的高度。我已经包含一个片段here。我不确定为什么它会提早中断，而且我也注意到如果我注释掉portrait-crop课程，它会进一步被切断。我还想在网格下方显示“Photos by ...”文字，但目前预设为above it。

这是基本的HTML：

<div class="post-content"> 
<div class="gallery"> 
<a href="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"><img class="left-half" src="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s319/01-kp.jpg"></a><a href="https://lh3.googleusercontent.com/-OAiF-OjYJzA/VDKGa4axmDI/AAAAAAAAWbc/vmoLHWz86zI/s1024/02-kp.jpg"><img class="right-half" src="https://lh3.googleusercontent.com/-OAiF-OjYJzA/VDKGa4axmDI/AAAAAAAAWbc/vmoLHWz86zI/s319/02-kp.jpg"></a> 

<a href="https://lh3.googleusercontent.com/-6IYhW-Ksbm8/VDKGaVkLJAI/AAAAAAAAWbQ/FJUbM4S2kMk/s1014/03-kp.jpg"><img class="left-half" src="https://lh3.googleusercontent.com/-6IYhW-Ksbm8/VDKGaVkLJAI/AAAAAAAAWbQ/FJUbM4S2kMk/s319/03-kp.jpg"></a><a href="https://lh5.googleusercontent.com/-uy9eVashTA0/VDKGfXqlExI/AAAAAAAAWbk/oGtEW4zcW-U/s1024/04-ttw.jpg"><img class="right-half" src="https://lh5.googleusercontent.com/-uy9eVashTA0/VDKGfXqlExI/AAAAAAAAWbk/oGtEW4zcW-U/s319/04-ttw.jpg"></a> 

<a href="https://lh4.googleusercontent.com/-wBlWTyzJq-M/VDKGgTEIJCI/AAAAAAAAWbs/4Qv6TLd6AT8/s1024/05-ttw.jpg"><img class="left-half" src="https://lh4.googleusercontent.com/-wBlWTyzJq-M/VDKGgTEIJCI/AAAAAAAAWbs/4Qv6TLd6AT8/s319/05-ttw.jpg"></a><a href="https://lh3.googleusercontent.com/-vD0o2eYgybU/VDKGhX2HaoI/AAAAAAAAWb0/ZxLh_Q4FlJE/s1024/06-ttw.jpg"><img class="right-half" src="https://lh3.googleusercontent.com/-vD0o2eYgybU/VDKGhX2HaoI/AAAAAAAAWb0/ZxLh_Q4FlJE/s319/06-ttw.jpg"></a> 

<a href="https://lh4.googleusercontent.com/-HU1ZzV4myDI/VDKGimDTPgI/AAAAAAAAWb8/93BOoWrs9KY/s1024/07-nbr.jpg"><img class="left-half" src="https://lh4.googleusercontent.com/-HU1ZzV4myDI/VDKGimDTPgI/AAAAAAAAWb8/93BOoWrs9KY/s319/07-nbr.jpg"></a><div class="portrait-crop"><a href="https://lh6.googleusercontent.com/-O3cyqF3Gu5U/VDKGqr9xkeI/AAAAAAAAWcU/TRu0oBIgk80/s1024/08-nbr.jpg"><img class="right-half" src="https://lh6.googleusercontent.com/-O3cyqF3Gu5U/VDKGqr9xkeI/AAAAAAAAWcU/TRu0oBIgk80/s467/08-nbr.jpg"></a></div> 

<a href="https://lh4.googleusercontent.com/-OowRDQw86lA/VDKGmrQLK2I/AAAAAAAAWcE/orAgQ6ksV7A/s1024/09-nbr.jpg"><img class="left-half" src="https://lh4.googleusercontent.com/-OowRDQw86lA/VDKGmrQLK2I/AAAAAAAAWcE/orAgQ6ksV7A/s319/09-nbr.jpg"></a><a href="https://lh3.googleusercontent.com/-zddd5Vn1fh4/VDKGnvMCMyI/AAAAAAAAWcM/rizq8xatHaM/s1024/10-nbr.jpg"><img class="right-half" src="https://lh3.googleusercontent.com/-zddd5Vn1fh4/VDKGnvMCMyI/AAAAAAAAWcM/rizq8xatHaM/s319/10-nbr.jpg"></a> 

<a href="https://lh6.googleusercontent.com/-mwe97_lv3_E/VDKGsSzSreI/AAAAAAAAWcg/9bZ9k50Tuac/s1024/11-sf.jpg"><img class="left-half" src="https://lh6.googleusercontent.com/-mwe97_lv3_E/VDKGsSzSreI/AAAAAAAAWcg/9bZ9k50Tuac/s319/11-sf.jpg"></a><a href="https://lh6.googleusercontent.com/-jOCp7Ho5ZZU/VDKGsiyZbwI/AAAAAAAAWck/KxMnVKfjEPw/s1024/12-sf.jpg"><img class="right-half" src="https://lh6.googleusercontent.com/-jOCp7Ho5ZZU/VDKGsiyZbwI/AAAAAAAAWck/KxMnVKfjEPw/s319/12-sf.jpg"></a> 

<a href="https://lh5.googleusercontent.com/-1zKhsQ8tRzY/VDKGvPI60yI/AAAAAAAAWcs/rmDBhOdZvyU/s1024/13-sf.jpg"><img class="left-half" src="https://lh5.googleusercontent.com/-1zKhsQ8tRzY/VDKGvPI60yI/AAAAAAAAWcs/rmDBhOdZvyU/s319/13-sf.jpg"></a><a href="https://lh4.googleusercontent.com/-8nB7X8FMihk/VDKGw5zC2qI/AAAAAAAAWc4/np_RIf5Qk-Q/s1024/14-sf.jpg"><img class="right-half" src="https://lh4.googleusercontent.com/-8nB7X8FMihk/VDKGw5zC2qI/AAAAAAAAWc4/np_RIf5Qk-Q/s319/14-sf.jpg"></a> 

<a href="https://lh3.googleusercontent.com/-bHrL50qcEV0/VDKGxZojWzI/AAAAAAAAWc8/jnmwCrJfzYc/s1024/15-sf.jpg"><img class="left-half" src="https://lh3.googleusercontent.com/-bHrL50qcEV0/VDKGxZojWzI/AAAAAAAAWc8/jnmwCrJfzYc/s319/15-sf.jpg"></a> 
</div> 
</div> 

任何帮助，将不胜感激！

Answer 1

添加到您的样式表：

.gallery { 
    overflow: auto; 
} 

DEMO