0

我正在开发一个网站模板，只是发现了画廊灯箱插件的问题。http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html

当画廊有超过 1 个图像时，灯箱渲染得很好，但是当它只有 1 个图像时，大图像包装器变得比图像小。我有点发现是什么导致了这个问题——这个模板使用了基础 3.0 框架，所以在foundation.min.css 文件中，第一个选择器导致了问题：

"    * {
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      }

我试图删除它并解决了问题，但是整个网站都被破坏了。我不确定我应该在这里粘贴什么代码。如有必要，我可以发布一个链接以下载所有模板文件。谢谢！

4

1 回答 1

1

不要更改此代码，而是修改包装器的 css。您发布的那段代码告诉所有元素在计算宽度时包含任何边框和填充。所以一个有 10px 的 padding 和 5px 的边框空间并且是 200px 宽的盒子实际上是 200px 宽。如果没有此代码，框实际上将是 230 像素宽。

你可以这样做...

添加到类lightbox-outer- overflow: hidden。

.lightbox-outer {
overflow: hidden;
}

这有效，但它隐藏了图像的一部分，就像你的盒子不想缩放到图像的大小一样。

你在灯箱的任何地方都有设置特定比例的设置吗？

EDIT2：我发现的其他东西，如果我从 .lightbox-skin 类中删除“宽度”，那么它会再次开始表现。问题是这个宽度是动态应用于内联元素的吗？

于 2013-05-10T17:19:38.720 回答