Div边界和定位

时间:2014-10-08 11:37:24

标签: html css

我创建了一个包含网格布局的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>

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:2)

将其添加到样式表中:

.gallery {
     overflow: auto;
}

<强> DEMO

相关问题