我正在为我们自己的一系列应用程序/门户创建一个网格系统。我们有基本的网格宽度和装订线等；但我们正在考虑让网格有点响应。考虑到这一点，我们想制作一个弹性网格系统。虽然，Ethan Marcotte 确实巧妙地写下了响应式设计的基础知识in his book，但他并没有考虑谈论这种方法在浏览器中的效果......叹息......
据我研究，百分比宽度（对于流畅/弹性布局至关重要）一直是 Opera + Safari 的一大痛点。这是 Opera 中普遍存在的 bug，在 Opera + safari 上就连流畅的 960gs 也有问题。
我唯一能找到百分比宽度的地方是在 YUI2 中。任何 YUI 开发人员都对详细说明他们如何使百分比宽度在 Opera / Safari 上工作感兴趣？？
这是一个 SOS，适用于经验丰富的开发人员和网格创建者，他们可以就变通方法/解决方案提供建议/指导，以使此类事情跨浏览器工作。
非常感谢！ 桑杰
【问题讨论】：
标签： css grid yui 960.gs yui-grids
我不知道您所说的“响应式布局”是什么意思，但如果它与流体宽度有关，那么答案就是一个。 OOCSS Grids.
您需要记住，行和单位（列）在此处不能有边距和填充。内部元素可以拥有它们。通过“面向对象的 CSS”，您可以在一个 HTML 标记中使用多个类，这样您就可以创建类：
.inner{
margin:16px; /* or whatever CSS size you like */
}
并将其应用于行或列的每个直接子级，例如：
<div class="myContent inner"/>
您可以将行嵌套在行中，但不能将列嵌套在列中。
.wfull{
width:100%;
background:orange;
}
.w950{
width:950px;
}
<div class="line wfull">
<div class="line w950"/>
</div>
如果您想查看更复杂的 OOCSS 工作示例（我几乎增强了网格并更改了名称：line->container、unit->column、size1of2->half 等等），请查看：
这是（尚未完成）关于我的增强功能的文档：
docs.asyncode.com/text/RichML-reference
OOCSS 在幕后工作，但名称是 1:1 复制到 HTML 中的，所以你会知道它是关于什么的。
我在许多浏览器中测试了 OOCSS，没有一个不能处理它。这是可能的，因为 Nicole Sullivan 发现或发明了非常讨厌的 CSS hack - 不要在家里尝试:)。
【讨论】：
【讨论】：