Question

我正在为一堆我们自己的应用程序/门户创建一个网格系统。我们有基本的网格宽度和排水沟等;但是我们正在考虑让网格有点响应。考虑到这一点，我们想制作一个弹性网格系统。虽然，Ethan Marcotte确实整理了响应式设计的基础in his book，但他并没有考虑在浏览器中讨论这种方法的效果......叹息......

据我所研究，百分比宽度（对于流体/弹性布局至关重要）对Opera + Safari来说是一个主要的痛苦。这是Opera中普遍存在的一个错误，即使是流畅的960gs在Opera + safari上也有问题。

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

对于经验丰富的开发人员和网格创建者来说，这是一个SOS，他们可以建议/指导变通方法/解决方案，以使这些东西在浏览器中运行。

非常感谢！桑杰

Answer 1

我不知道你所说的“响应式布局”是什么意思，但如果它是关于流体宽度的那么答案是一个。 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-＆gt; container，unit-＆gt; column，size1of2-＆gt; half等等），请检查：

asyncode.com

以下是（尚未完成）有关我的增强功能的文档：

docs.asyncode.com/text/RichML-reference

OOCSS在幕后工作，但名称会以1：1的比例复制到HTML，因此您将知道它是什么。

我在许多浏览器中测试了OOCSS，并且没有单一的无法处理它。这是可能的，因为Nicole Sullivan发现或发明的非常讨厌的CSS黑客 - 不要在家里尝试：）。

Answer 2

我认为这可能会帮助你解决这个问题。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

浏览器中的CSS流体网格

2 个答案: