将 Blogroll 分为两栏 (1)
很多 Blogger 都会遇到这么一个问题: 当侧边栏某个列表中的项目过多时, 它看起来细长而不饱满, 浪费空间又不美观.
为解决这问题各施其法, 有的选择了一个三栏的主题, 感观上会和谐一点; 有的随机显示几个链接, 让它看起来不那么狭长; 有的是一不做二不休地, 首页不将它显示出来 (如: Blogroll 放 Links 页); 但还有一些人, 他们将列表的内容划分为两半, 空间得到充分利用, 界面也好看.
小弟也是看到别人的这个巧妙设计, 才得到启发的. 点子很好, 但我不能看别人代码呀, 只好自己想法子了...
半年前我写过一篇日志, 让侧边栏列表一分为二. 那是用 JavaScript 实现的, 是一个相当愚蠢的办法, 而且不能支持 Widget. 但其实可以用 PHP 生成我们想要的效果. 看! 看! 就是右图的效果...
计划:
整个教程将以 Blogroll 为例, 会分成几个部分开展.
第一部分, 也就是这次, 我将会分析一下页面结构, 为以后的部分做准备. 这是一个重要的环节, 因为要解决 IE 和其他浏览器间的不兼容现象. (过程中我们会见到 IE 的不可理喻)
第二部分, 我会尝试改写 WordPress 的源代码或者尝试自己写一个以达到我们的目标.
第三部分, 我将会介绍一下, 如何将第二部分的内容做成支持 Widget 的版本.
第四部分, ... (先计划这么多吧, 完成了前面的再说.)
这次介绍的第一部分需要一些 HTML 基础和 CSS 知识, 你准备好了吗?
原始版本:
我们先得看看 Blogroll 目前的结构.
1 2 3 4 5 6 7 8 9 | <h3>Widget Title</h3> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> |
再来看看它的显示效果: Firefox, IE6/7
嗯, 好! 还蛮工整的, 但是列表的右边空空的, 又浪费空间又难看. 最好我们可以将它分成两栏, 这样的话, 用三行就能够将六项给显示了. 看来需要改造一下看看...
改造版本 1
本来是一行放一个, 而改造的目标是一行放两, 改造后的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <h3>Widget Title</h3> <ul> <li> <div style="float:left;width:50%;">item 1</div> <div style="float:left;width:50%;">item 2</div> </li> <li> <div style="float:left;width:50%;">item 3</div> <div style="float:left;width:50%;">item 4</div> </li> <li> <div style="float:left;width:50%;">item 5</div> <div style="float:left;width:50%;">item 6</div> </li> </ul> |
改造版 1 的显示效果: Firefox, IE6/7
为了突出主要的样式, 我将 style 属性直接加到标签里面了.
在 IE6 和 IE7 中已经得到我们想要的效果了, 很好! 但是在 Firefox, 甚至其他任何内核的浏览器中, 都错位了, 这是因为两个浮动的标签没有固定下来, 跟它下方的东西重叠在一起了. 那么, 继续改...
改造版本 2
在这个版本中, 我们需要将浮动的标签固定起来. 为此我们选用 CSS 中的 clear:both 来让它左右两边都没有东西 (将 clear 后面的东西挤下去), 改造后的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <h3>Widget Title</h3> <ul> <li> <div style="float:left;width:50%;">item 1</div> <div style="float:left;width:50%;">item 2</div> <div style="clear:both;"></div> </li> <li> <div style="float:left;width:50%;">item 3</div> <div style="float:left;width:50%;">item 4</div> <div style="clear:both;"></div> </li> <li> <div style="float:left;width:50%;">item 5</div> <div style="float:left;width:50%;">item 6</div> <div style="clear:both;"></div> </li> </ul> |
改造版 2 的显示效果: Firefox, IE6/7
Firefox 中终于 fixed 了! 但这么一弄, 在 IE 中却多了一块来历不明的空白. 再改吧...
改造版本 3
网上很多人说, IE 中的 clear 是有高度的. 但我不这么觉得, 不信你将它的高度设为零看看...
怎么都好, 我确实不知道 IE 为什么要这样显示 (谁能告诉我?), 但我们可以将它解决掉, 只要在外面再套一层 DIV... 修改后的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <h3>Widget Title</h3> <ul> <li> <div> <div style="float:left;width:50%;">item 1</div> <div style="float:left;width:50%;">item 2</div> <div style="clear:both;"></div> </div> </li> <li> <div> <div style="float:left;width:50%;">item 3</div> <div style="float:left;width:50%;">item 4</div> <div style="clear:both;"></div> </div> </li> <li> <div> <div style="float:left;width:50%;">item 5</div> <div style="float:left;width:50%;">item 6</div> <div style="clear:both;"></div> </div> </li> </ul> |
改造版 3 的显示效果: Firefox, IE6/7
Bingo! 各浏览器中都没问题, 我们要的就是这个效果.
后记:
这就是我们要整出来的结构, 下回我们将用 PHP 写一个脚本, 让它自动生成.
你是不是已经看明白了? 如果你还没弄明白, 你可以下载演示代码回去温习一下.
如果你还有疑问或者好的建议, 请在此留言, 我们讨论讨论... 
English
做成隐藏效果的不错哦
很好!
小土豆就是用PHP实现的：）
重新开张了，欢迎砸场啊！！！
因为偶尔有人问起 Blogroll 如何分栏, 也有人问起为什么 Widget 不能用等等问题.
我觉得不是一言一句可以说完的, 所以我准备写一个简单的教程. 目前我就这水平, 高手觉得哪儿不对一定要指点指点.
因为时间和篇幅关系, 我将它分成己部分写, 断断续续地写.
@bobosky
为什么你的文章不转移到新的空间?
俺晕……文盲飘过……
你看到我在里面写的了吗？我在yo2倒出来再倒进去的时候，总是出现问题，整了半天还是没有搞定，我也搞不清问题出现在那？yo2那边也不可能给我提供数据库吧。只能重新出发啦！
还有问一下，为什么我用的你这个皮肤不能该STYLE呢？ 后台的那个选项我也改了啊！！
@bobosky
不知道是不是 yo2 做过手脚.
你说这个黄色的风格吗? It's mine. 想用就等下个版本吧.
又有大作了，一贯的支持！
如此详尽的改良过程，很佩服你严谨的研究态度。
不喜欢用 widget, 在 Style.css 里面, li { float: left; width: 49.5% }， 就不用那么多 div 了. 不知道我有没有理解错
我就是偶尔里面的其中一个
就从那开始知道这些标签的意思
佩服
@mg12
也许是,现在估计从yo2转出来的人太多了,^_^
我说的模板是你以前发布的那个,在上面有五个style可以选择的那个,为什么我的不能选择呢???
还有为什么我的头像不能显示呢?
在小众软件那边都是显示正常,郁闷啊!!!
我自己的blog上也显不出来!
我倒觉得没必要，页面塞太多东西其实也不怎么好
我想知道在Widgets里面，分类怎么分成2行甚至3行
@bobosky
我去看了一下, 但不清楚你那是什么状况, 还没遇到过.
貌似 JavaScript 失效了.
@atmo
你是要分行还是分列?
这个办法能把sidebar里面的区块分为三栏甚至更多吗？
@mg12
应该好似你这个Blogroll那样分2栏，甚至3栏。
mg12是什么意思啊
今天才看到这个，晚了！
@Kaws
=. = 路过...
@70
早些看到呢?
虽然没打算用，但是仔细看了一遍。。。写得很清楚，调理分明，赞
真是，都是。。。。。。。为了万恶的IE。。。
太强了，你！ 收下， 现在正在测试你的这个发现
要是能直接给个代码 拷回帖上能用 就好了
@ifender
授人以鱼不如授人以渔.
授人以鱼不如授人以渔
对，要不然以后人家会问个不停
很不错的方法，有些比较宽的侧栏摆一列太空，这样放两列就好多了