Drupal Zen主题使用的浮动侧巴方法
-
11-12-2019 - |
题
在Drupal Zen主题中,我注意到侧边栏和主Div都浮出到左侧,每个DIV的边缘右设置回页面的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;
}
解决方案
首先要想到的是将它们全部漂浮到左边会让每个容器都遵守其他容器。是漂浮在右侧的第二个侧边栏,含有的div大于其子女div的总和,而不是第二个侧边栏将从其他人结束空间。将布局液与它们保持所有浮动到左侧更容易。
第二件事要想到,并且可能更重要的是重要的,这通常很好,只能在一个方向上应用像浮子和边缘的东西。当他们全部走向一个方向时,在您正在开发时追踪更容易。具有向下推动和俯卧撑或漂浮的边缘,只为开发人员添加一层混淆。
还有一些IE错误关于浮子的方向与边缘的方向相比,尽管我完全记不起它们......认为这是不像浮子的相同方向上施加边距......因此他们漂浮左和边缘(?)右。
p.s.:
Harry Roberts CSS向导在为什么要保持边缘和一切都在一个方向。
和在同一方向上添加边距时的错误浮动。。问题是IE5 / 6中的余量将加倍。 imho我不认为我们需要为LTE IE6设计,但它仍然可能是将边距和浮动在相反的方向上的最佳实践。
其他提示
从我的drupal days中记得的内容,这种方式设置了zen主题的主要原因是这样的实际页面内容可以在HTML中首先打印出来。(实际上,几个笨拙的主题使用这种方法,虽然我认为Zen是首先举例)。
然后它们浮动所有内容并使用一些疯狂的保证金数学来似乎导航位于顶部,那个侧栏显示在内容的左侧,然后侧栏两个显示在内容的右侧。
这旨在在屏幕读者,机器人等的可访问性方面更友好。
我相信这个旧列表分开文章通常解释了使用的方法: http://alistapart.com/文章/ negativemargins