跨浏览器的CSS流体网格

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

据我所探索，百分比宽度对流体/弹性布局来说是必不可少的）已经成为Opera + Safari的一大难题。这是Opera中流行的一个bug，甚至在Opera + safari上流畅的960gs也是错误的。

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

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

谢谢！ Sanjay

来源

2011-07-12 hashpipe

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

来源

2011-07-12 10:05:24 Joonas

看起来不错..但这不完全是一个网格系统？我会尝试创建一个网格系统，看看它是否可以匹配我们的用例 - 更灵活的创建任何类型的布局，然后轻松嵌套。非常感谢这.. – hashpipe

是的。当你不能得到柠檬，你应该去土豆，并尝试使它们看起来像柠檬。 – Joonas

我不知道你的意思是说“响应式布局”，但如果是关于流体宽度，那么答案就是一个。 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的更复杂的工作示例（我增强电网几乎和改了个名字：设备 - >容器单元 - >列，size1of2->半等）检查：

asyncode.com

这里的（未完成尚未）的文件在我的增强功能：

docs.asyncode.com/text/RichML-reference

OOCSS工作在那里幕后，但是名字被1：1复制到HTML，所以你会知道它是什么。

我在很多浏览器中测试过OOCSS，没有一个不能处理它。这可能是因为Nicole Sullivan发现或发明的非常讨厌的CSS黑客 - 不要在家中尝试它:)。

来源

2011-07-18 21:08:48

跨浏览器的CSS流体网格

回答

相关问题