有三个div – 一个包含div内的文本，它包含在一个隐藏的div中，所以我可以相应地操作内容，一个包含一个图像库，一个包含一个链接到一个YouTube视频。我创建了一个隐藏的类，我通过CSS调用如下：
文本部分的HTML：
<a class="fancybox" href="#bio">...blah blah blah... ...then later on...<article class="hidden" id="bio">
视频部分的HTML：
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS：
.hidden {
overflow:hidden;
display:none;
}
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",},{
href : "image_2.jpg",{
href : "image_3.jpg"
}
],{
helpers : {
thumbs : {
width: 75,height: 50
}
}
});
});
});
</script>
使用fancybox 2默认值(autoSize：true，autoWidth：false和autoHeight：false)，相应地调整图像的大小，相应地调整视频大小，但是文本链接默认为最小高度和最大宽度：
如果我将autoSize和autoWidth设置为False，则将autoHeight设置为True，图像仍然以相同的方式调整大小，文本框将调整为浏览器窗口的大约50％，右侧显示一部分白色的视频：
说实话，我喜欢这个例子中文本框的大小，他们的行为是响应性的，但视频盒是错误的，所以有点恼人。
到目前为止，我没有成功尝试过以下内容：
>删除class =“hidden”并用inline替换它
“显示：无”脚本，然后显示：内嵌块在CSS中，根据朋友的建议，但我意识到它不会工作;
给予隐藏文本div一个网格设置符合HTML的其余部分，但这只是使div调整大小，而不是fancybox。
>我可以设置一个静态宽度，但它需要响应，所以这是不能接受的我的需要;
那我在哪里错了？可以在设置autoSize：true，并向需要它的div添加一个em或％宽度的答案吗？
我也在考虑在开放时调用一个脚本，只是影响我需要的div，但我不知道是否可以。我不是JavaScript用户，所以我的知识很差。
解决方法
在第一张图片中，您使用文字，如果您将其设置为适用，会发生什么：
width: 100%; max-width: 500px; /* or whatever you like */ margin: 0 auto; left: 0; right: 0;
到屏幕截图中的白色外(或最外)容器。
如果fancybox覆盖它，请使用！重要。
真的，在这种情况下，您只需要fancybox来加载或显示它，然后垂直放置。你应该可以把它水平地放在自己的几行CSS中。假设我们没有一个工作演示，所以可能会有一些我失踪的东西(像它的内容大小或溢出)。但是，如果您可以发布演示，我很乐意修改我的答案。
