0

我正在为我们自己的一系列应用程序/门户创建一个网格系统。我们有基本的网格宽度和装订线等；但我们正在考虑让网格有点响应。考虑到这一点，我们想制作一个弹性网格系统。虽然，Ethan Marcotte 确实在他的书中巧妙地记录了响应式设计的基础知识，但他并没有考虑谈论这种方法在浏览器中的效果......叹息......

据我探索，百分比宽度（对于流畅/弹性布局至关重要）一直是 Opera + Safari 的主要痛点。这是 Opera 中普遍存在的 bug，即使是流畅的 960gs 在 Opera + safari 上也有问题。

我唯一能找到百分比宽度工作的地方是在 YUI2 中。任何 YUI 开发人员都对详细说明他们如何使百分比宽度在 Opera / Safari 上工作感兴趣？

这是一个 SOS，适用于经验丰富的开发人员和网格创建者，他们可以就变通方法/解决方案提供建议/指导，以使此类事情跨浏览器工作。

万分感谢！桑杰

4

2 回答 2

1

我不知道您所说的“响应式布局”是什么意思，但如果它是关于流体宽度，那么答案就是一个。OOCSS 网格。

您需要记住，行和单位（列）在这里不能有边距和填充。内部元素可以拥有它们。通过“面向对象的 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 等），请检查：

异步代码.com

这是（尚未完成）关于我的增强功能的文档：

docs.asycode.com/text/RichML-reference

OOCSS 在幕后工作，但是名称是 1:1 复制到 HTML 中的，所以你会知道它是关于什么的。

I tested OOCSS in many browsers and there was no single one which couldnt handle it. This was possible because of very nasty CSS hacks that Nicole Sullivan found or invented - don't try it at home:).

于 2011-07-18T21:08:48.713 回答
0

我认为这可能会对您有所帮助。http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

于 2011-07-12T10:05:24.260 回答