2014-10-08 55 views
0

我創建了一個包含網格佈局的div,但邊框沒有正確包圍它,除非我手動設置它的高度。我已經包含一個片段here。我不確定爲什麼它會提早中斷,而且我也注意到如果我註釋掉portrait-crop課程,它會進一步被切斷。我還想在網格下方顯示「Photos by ...」文字,但目前預設爲above itDiv邊框和定位

這是基本的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> 

任何幫助,將不勝感激!

+1

添加'溢出:auto'到'.gallery'解決了這個問題。 – akinuri 2014-10-08 11:42:38

回答

2

添加到您的樣式表:

.gallery { 
    overflow: auto; 
} 

DEMO