如何使用jQuery正确设置响应库的高度
如何使用jQuery正确设置响应库的高度
提问于 2014-12-10 21:43:46
我们在这里设置了一个基本的基于淡入的jQuery图库：http://jsfiddle.net/k1x5wkbs/
身高要求是：
- 将
.gallery的高度设置为.gallery-item内图像的高度 - 如果图库位于
.hero内部，则将.gallery的高度设置为.hero的高度 - 如果窗口宽度低于500 to，则将
.hero图库的高度设置为.gallery-item内的图像。 - 在页面加载和窗口大小调整时计算高度
问题：
- 在某些窗口宽度时，第二个图库的高度没有得到正确的计算(注意下面的空白或它覆盖下面文本的方式--无论是在页面加载上，还是在窗口大小调整上)
- 在宽度低于500的情况下，
.hero画廊的高度被错误地计算出来(它应该总是在500 no以下的一个正方形，下面没有空隙)。 - 优化和集成窗口调整事件的最佳方法是什么？
这是我们对jQuery函数的第一次尝试，所以任何关于组织/优化代码的其他建议都是非常欢迎的。
干杯
本
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-16 05:48:51
最后，我得到了一些帮助-一些布局必须移动到CSS和一个新的jQuery插件编写。
虽然从设计的角度来看，这是一个简单的布局，但在CSS中创建它却是令人惊讶的痛苦(就像往常一样！)
.hero-image和.hero-text需要更改定位上下文，因为这些元素指定和定义容器大小(库始终是容器的100% )。
.hero {
position:relative;
}
.hero-text {
position:relative;
}
.hero-image{
position:absolute;
left:0;
top:0;
bottom:0;
}无论如何，这意味着库不能通过简单地将类传递给它来设置它的高度- CSS需要修改，这是一个遗憾。
以下是更新的小提琴：http://jsfiddle.net/gaby/fkz7bb6r/5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27411392
复制相关文章
相似问题
腾讯云开发者
