Question

在Drupal Zen主题中，我注意到侧边栏和主要div都浮动到左边，每个div的边距右边设置回到页面的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;
}

Answer 1

要想到的第一件事是将它们全部悬浮在左侧将使每个容器与其他容器对接。如果第二个侧边栏浮动到右边，并且包含的div大于其子div的总和，那么第二个侧边栏会比其他边栏更大。它们更容易保持布局流畅，它们全部浮动到左侧。

要想到的第二件事，也许更重要的是，在一个方向上只应用浮点数和边距这样的东西通常都是好的。当它们都朝着一个方向前进时，在你开发过程中跟踪它会容易得多。边缘向下推，向上推或向右和向左浮动只会给开发人员增加一层混乱。

关于浮动方向与边缘方向有关，也有一些IE错误，虽然我不记得它们......认为它不是在浮点数的相同方向上应用边距...因此它们向左浮动和边缘（？）向右移动。

P.S：

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的利润率翻倍。恕我直言，我认为我们不再需要为IE6设计了，但它仍然是最好的做法，将保证金和浮动放在相反的方向。

Answer 2

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

然后他们将剩下的所有东西都浮动并使用一些疯狂的边距数学来使导航显示在顶部，侧边栏显示在内容的左侧，然后侧边栏2显示在内容的右侧。

这对于屏幕阅读器，机器人等的可访问性而言更加友好。

我相信这个旧A列表分开的文章通常会解释使用的方法：http://alistapart.com/article/negativemargins

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

2 个答案: