Fancybox 描述框超出范围

Question

我有这个带有描述框的花式框弹出图像。我的问题是，当我将浏览器的大小从上调整到下（在 jsfiddle 中尝试）时，文本似乎开箱即用。知道如何解决吗？

代码： HTML:

<a caption="<h2>Image Header</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

CSS:

.hidden {
    display: none;
}

.fancybox-title {
    right:auto;
    height:100%;
    left:-260px;
    margin-bottom:auto;
}

.fancybox-title .child {
    height:100%;
    white-space:normal;
    text-align:left;
    padding:0 20px;
    max-width:200px;
    margin-right:auto;
    border-radius:0;
}

.fancybox-title .child h2 {
    font-size:140%;
    line-height:1.5;
    margin-top:20px;
    margin-bottom:15px;
}

.fancybox-title .child p {
    margin-bottom:30px;
}

JQUERY:

     $('.fancybox').fancybox({
                prevEffect : 'fade',
                nextEffect : 'fade',
               padding:0,

                closeBtn  : true,
                arrows    : true,

               nextClick : true,    


               helpers : { 
    title : { type : 'outside' }
   },

               helpers : {

                    thumbs : {
                        width  : 80,
                        height : 80

                    }
                },



 beforeLoad: function() {
    this.title = $(this.element).attr('caption');
   }

            });

Answer 1

如果我很了解你的问题，我建议将 .fancybox-title 的属性从 height:100% 更改为 height:auto。对于响应设计，我最好使用 自动高度 。检查 fiddle ！让我知道是否有帮助！

编辑

这是新的 fiddle。

我更新了一些东西：

 top: 0;

反对bottom:0

并保持 height:auto 与我之前的示例相同。

.hidden {
    display: none;
}

.fancybox-title {
    right:auto;
    height:auto;
    left:-260px;
    margin-bottom:auto;
    /* CHANGES */
    top: 0;
}

.fancybox-title .child {
    height: auto;
    white-space:normal;
    text-align:left;
    padding:0 20px;
    max-width:200px;
    margin-right:auto;
    border-radius:0;
}

.fancybox-title .child h2 {
    font-size:140%;
    line-height:1.5;
    margin-top:20px;
    margin-bottom:15px;
}

.fancybox-title .child p {
    margin-bottom:30px;
}

再次等待您的支票:)

Fancybox 描述框超出范围

Fancybox description box out of scope

html

javascript

css

jquery

fancybox