Drupal Zen 主题中使用的浮动侧边栏方法答案

【问题标题】：Floating sidebars approach used in Drupal Zen themeDrupal Zen 主题中使用的浮动侧边栏方法
【发布时间】：2012-07-26 02:43:42
【问题描述】：

在 Drupal Zen 主题中，我注意到侧边栏和主 div 都向左浮动，每个 div 的 margin-right 设置回页面的 0 位置。你可以看到演示here。我知道有很多方法可以达到相同的结果，但我只是对使用这种方法的优势感到好奇。为什么不让侧边栏第二个浮动到右侧？提前致谢！

#main {
    float: left;
    margin-left: 20%;
    margin-right: -80%;
    width: 60%;
    background-color: #eee;
}

#sidebar-first {
    float: left;
    margin-left: 0;
    margin-right: -20%;
    width: 20%;
    background-color: #FFFF66;
}

#sidebar-second {
    float: left;
    margin-left: 80%;
    margin-right: -100%;
    width: 20%;
    background-color: #FFFF66;
}

【问题讨论】：

我不是 100% 确定为什么，结果可能非常相似，但在我看来，这似乎是一种让元素始终保持一致的方法。如果由于某种原因容器比它的 3 个孩子大，中间和右边之间会有一个间隙。至少这是我的看法。

标签： css drupal drupal-theming drupal-zen

【解决方案1】：

首先要想到的是，将它们全部浮动到左侧会使每个容器都与其他容器对接。如果第二个侧边栏向右浮动并且包含的 div 大于其子 div 的总和，那么第二个侧边栏最终会与其他侧边栏分开。将它们全部浮动到左侧更容易保持布局流畅。

要想到的第二件事，可能更重要的是，通常只在一个方向上应用浮动和边距之类的东西通常是好的。当它们都朝着一个方向发展时，在开发过程中更容易跟踪。下推和上推的边距或左右浮动的边距只会给开发人员增加一层混乱。

还有一些关于浮动方向相对于边距方向的 IE 错误，虽然我不记得它们的确切含义......认为这就像不在浮动的相同方向上应用边距......因此它们向左浮动，向右浮动（？）。

附：

CSS 向导 Harry Roberts 在 why to keep margins and things all in one direction. 上写了一篇很棒的文章

还有IE Bug when adding a margin in the same direction of a float.上的第一篇文章。问题是它会使 IE5/6 中的边距翻倍。恕我直言，我认为我们不再需要为 lte IE6 进行设计，但最好的做法仍然是设置边距和浮动方向。

【讨论】：

【解决方案2】：

根据我在 Drupal 时代的记忆，以这种方式设置 Zen 主题的主要原因是，实际页面内容可以首先在 HTML 中打印出来。（实际上有几个 Drupal 主题使用了这种方法，尽管我认为 zen 是最好的例子）。

然后，他们将所有内容都向左浮动，并使用一些疯狂的边距数学来使导航看起来位于顶部，侧边栏一显示在内容的左侧，然后侧边栏二显示在内容的右侧。

这是为了让屏幕阅读器、机器人等的可访问性更加友好。

相信这篇老A list Apart文章大致解释了使用中的方法：http://alistapart.com/article/negativemargins

【讨论】：