如何使用网格框架实现部分灵活的屏幕布局？

Question

我正在尝试使用CSS网格框架（BluePrint）实现以下屏幕布局，但未成功：

如何通过网格框架实现这一目标？有没有人有共享的CSS / HTML代码示例？感谢。

PS：我想使用框架的原因是为了确保此布局适用于所有浏览器（任何安全框架都可以，它不一定是蓝图）。

Answer 1

YAML应该能够：http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html

或者也许是Fluid 960？ http://designinfluences.com/fluid960gs/

Answer 2

深入研究这个问题后，我明白用网格框架解决它是不可能的。问题是两个高度和宽度是彼此的衍生物。此外，根据“中央”单元格的内容，滑动条也可能出现。

我找到了一个涉及一些Javascript的长解决方案。我首先用HTML中的div定义屏幕的不同单元格。然后，我检索文档的宽度和高度，并使用JQuery设置单元格的宽度和高度。我从修正值开始，然后是简单的衍生物，然后是复杂的衍生物。

对于幻灯片问题，我使用了here解释的技巧。我根据滑杆的存在调整中心柱的大小，滑杆本身取决于“中央”单元的高度，该单元本身取决于屏幕的宽度。