源文件中的第一个分栏

这个分栏在源文件中首先出现，它包含在向左浮动的 div.float-wrap 中，并在其中向右浮动。 div.float-wrap有一个负边距(margin-left)使之向左靠，这样就使它的另一个（向左浮动的）子块, (div.left)好像出现在 div.outer的红色边框(border-left: 150px solid #fcc;)的上方。

IE下右侧分栏的布置和别的浏览器不同，但这不是IE的bug！其实是因为当右侧分栏的边距为负值而超出其容器时，Mozilla不肯合作。 所以IE使用了 Doug Livingstone的超出其容器的负边距方法，而其他的就用了一个较宽的 div.inner，并且 div.right 不用负边距。

这种方法不适于流动式布局，因为分栏的颜色实际上是div.outer的边框，而边框不能以%作宽度单位。 但是，按源代码顺序的布局必须要使用%。除了固定一种屏幕尺寸以外，不可能将这两种度量方法混合使用。

注意：你所看到的彩色的分栏和粗的边界并不与栏目的内容直接联系。这是上述的困难所引起的。

不管哪个分栏的高度最大都没问题，尽管过长的栏目内容可能使IE出错，就像按源代码顺序的分栏中的那样，但这种错误并不严重， 因为分栏的背景色并不是由包含该栏目内容的同一个浮动元素产生的。所以不像S.O.C.(按源代码顺序的分栏)中的情形， 出错页面的一致性和可读性还算不错。

和我的"Flag demo"不同的是，甚至当每个栏目的内容都很少时，该布局同样很好用。呵呵！ 想不想多看看？正在运营中的这个商业站点 fellponies.com 就采用了这种布局，。

恐怕这种干巴巴的解说不仅没说清楚，反而更使人糊涂。其实我也只是刚弄明白！所以这只是个临时的示例，如果时间允许，我会详细分解。 哦，还要多谢Douglas Livingstone, 他开发的漂亮的 Douglas Livingstone 正是这个方案的核心， 多谢了， Douglas！:-D

Holly 'n John   e-mail ©positioniseverything
最近更新: January 6, 2004
写于 September 23, 2002
简体中文翻译: onestab 2004年1月17日