1

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

#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;
}

​</p>

4

2 回答 2

0

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

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

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

PS：

CSS 向导 Harry Roberts 写了一篇很棒的文章，关于为什么要保持边距和事情都在一个方向。

以及第一篇关于在浮动的同一方向上添加边距时的IE Bug。. 问题是它会使 IE5/6 中的边距翻倍。恕我直言，我认为我们不再需要为 lte IE6 进行设计，但最好的做法仍然是设置边距并朝相反的方向浮动。

于 2012-07-26T02:54:10.923 回答
0

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

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

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

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

于 2015-03-29T20:08:48.493 回答