hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
阅读:5233回复:12

【发布】【Stylish样式】Baidu Two Columns|百度搜索双列结果

楼主#
更多 发布于:2010-01-04 23:23
发布页:http://userstyles.org/styles/23845
让百度网页搜索结果双列显示。详情请到上面发布页。

百度的页面布局算是最恶心的了,弄成双列也比 Google 麻烦上百倍,所以这个样式精简了不少东西,同时“压缩”了整个布局。

☆ 2014.05.29 采用新的双列方式,现在不怕翻页脚本和扩展了!

--|我居然会发错区……

最新喜欢:

fang5566fang55...
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
1楼#
发布于:2010-01-04 23:23
ferret 提供的样式的确不错,但用 float 属性的问题在于元素排列必须对齐,于是排列中间就会出现为对齐而留下的空白;用 -moz-column-count 属性的话只有 Firefox 和 Webkit 核心浏览器支持(-webkit-column-count),但不会留下空白,但会对所有没强制位置的框架内元素生效,并且 Firefox 目前似乎不能准确计算应用该属性之后的文档长度尺寸(bottom 属性不能正确实现)。
有什么更好的办法呢?
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
2楼#
发布于:2010-01-04 23:23
就是这样的空白

附件服务器还是不怎么稳定的样子。
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
3楼#
发布于:2014-05-20 16:03
今年3月更新了,应对百度的新版设计(肉眼看不出来的,但在DOM结构上完全不一样)。
不过现在由于不再是以前的结构,虽然经过多次尝试最终还是实现了双列显示,但却会出现刷新一下页面或换个关键词会使双列部分失效(结果全在右边,但左边仍有权利保留声明的那行)的情况,而这种情况无论我怎么修改样式都没效果,反而将最大化的窗口恢复再重新最大化就会变回双列,百思不得其解……
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
4楼#
发布于:2014-05-29 12:54
再次更新,这次使用折叠结果的方式使之显示效果更加对齐,鼠标移上即展开,大家一定要试试哦!
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
5楼#
发布于:2014-07-02 09:36
我有一个疑惑,就是以下这段代码中:
div[id="content_left"]>div{
  display: inline-block !important;
  width: 45% !important;
  height: 9em !important;
  float: left !important;
  margin-left: 15px !important;
  margin-right: 30px !important;
  border-top: 2px dotted #B7DDE6;
  overflow: hidden !important;
}
【height: 9em】这个数字,如果调成小于9,那么鼠标悬浮在某结果上的时候该结果框会挤开所覆盖位置的其他结果,就像Word排版里面的“四面环绕”一样;如果大于等于9,则不会出现挤开效果,只会覆盖,就像Word排版里面的“浮在文字上方”一样。
为什么会这样呢?
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
6楼#
发布于:2014-07-02 17:00
linee:右上角的宽度不够, 我调成如图这样了, 请教如何减小中间和右边空白的宽度呢?回到原帖
在#8楼的代码中【width: 45%】调整搜索结果的宽度,调高即可减少空白,但是由于搜索结果自身有margin占位空白,搜索结果宽度不能调到50%,视屏幕宽度不同可调整的范围也不同。
我觉得留下些空白作为分隔挺好的。
hzhbest
千年狐狸
千年狐狸
  • UID22640
  • 注册日期2008-01-15
  • 最后登录2017-04-06
  • 发帖数1763
  • 经验476枚
  • 威望3点
  • 贡献值414点
  • 好评度89点
  • 社区居民
  • 忠实会员
7楼#
发布于:2014-07-04 09:29
linee:谢谢. 这个值我调整过了, 窗口模式最大45%, 最大化窗口47%. 作为分隔, 觉得有点宽了.回到原帖

图片:QQ截图20140704092426.png


右边是宽点,因为我的 Search Jump Around 放在那个位置 (↑这是最新版的,相关搜索放在右下了)
你可以调整#8楼代码中的【margin-right: 30px】这个参数,同时配合调整【margin-left: 15px】这个参数的话可以让你更好分配中间间隔和右间隔(后一个参数当然也影响左间隔)。
游客

返回顶部