我很难完全理解如何使用Frameless Grid.我的意思是,我完全理解这个概念.听起来不错.
我想我的牛肉只是它没有提供任何东西来定位你的元素.它只是设置它们的宽度,就是这样.因此,即使您将列宽应用于元素,除非您绝对开始浮动或定位,否则所有内容都会堆叠.
在这方面,我想我正在寻找一些建议,我是否可以使用一些通用定位样式来保持这些元素不被堆叠.
或者这太宽泛了？我应该根据具体情况定位我的元素吗？
(也只是我正在使用SASS的一个FYI,如果有帮助的话)
谢谢!
我以前曾多次使用过Chris jQuery脚本中的Chris Coyiers Equal Height Blocks,而且它总是很棒.
话虽这么说,我总是开发为特定分辨率而构建的网站.这次我正在开发一个响应式网站,主容器有一个流畅的宽度.因此,我遇到了一个问题,无法找到解决问题的方法.
在他的帖子中,克里斯说这关于流体宽度:
流体宽度怎么样？不使用表格的一个要点是浮动的div可以根据可用的水平空间重新排列,这对于流体宽度很好.我们也可以调整上面的代码来处理它.基本上第一次运行时,我们将测量每个块的高度,并使用jQuery的data()方法记住它.然后,在调整窗口大小时,再次运行代码,但使用原始大小来调整行,而不是新大小.
请注意,他特别引用了一个流体宽度的容器.在我的例子中,它不仅仅是容器,还有具有流体宽度的子元素.我需要均衡的块是相同的块具有流体宽度并调整到窗口/容器的分辨率.
我相信因为元素'originalHeight'随容器大小而变化,脚本将无法正常工作.
我的猜测可能是错误的,但不管怎样,这与流体宽度元素无关.寻求一些帮助!
当然,这是我创建的一个jsfiddle来演示这个问题.只需调整窗口的宽度,您就会注意到容器的高度不会更新.
我正在运行以下代码来调用窗口resize事件上的函数:
$(window).resize(function() {
columnConform();
});
提前致谢
我已经阅读了大量的问题和文章,我似乎无法弄清楚这一点.
这是我的布局结构的一个粗略示例:
body
- div 1 (header)
- div 2 (main content wrapper)
- - div 2a
- - - div 2a1
- - - div 2a2
- - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)
- - - div 2a3
- - div 2b
- div 3 (footer)
我认为我的主要问题源于2a的所有子元素都向左浮动的事实.
我发现的所有答案都谈到了添加100%高度的父容器,包括html和body标签.但我不能只是通过增加高度:100%; 所有每个提升的父母,因为它最终打破了我的布局.具体来说,当我将100%的高度添加到我的主内容包装器时,div 2.
这是我制作的一个jsfiddle,很好地代表了我的问题.