首页 > 其他方面 > 如何更改侧边栏的左右位置

如何更改侧边栏的左右位置

2007年3月27日

侧边栏的位置控制是由css来决定的,我们来看实例:
侧边栏层的名称是sidebar,内容层是content,我们来看看yahoo这个模板中css的相应代码:
.sidebar {
margin: 0px;
float: right; 居右对齐
width: 200px; 宽度为200px
}
.sidebar-hide {
display: none; 隐藏层
float: right;
}
.content {
float: left; 居左对齐
width: 100%;
margin-right: -200px; 这里的-200是为了隐藏侧边栏以后设置的,下同
background-color: #FFF;
}
.content-wide {
width: auto;
margin-right: -200px;
}
.content-only {
width: auto;
margin-right: -200px;
}

那么如果我们要把一个右侧边栏的模板修改为左侧边栏,只需要将sidebar和content层中float控制的属性对换一下,同时将sidebar-hide的float属性修改一下即可。

相关文章:

  1. 《激战》今日14点正式公测
  2. 我不了解飞机原理……这个飞机是否可以飞起来
  3. 令全世界游戏爱好者欢欣鼓舞的消息
  4. 推荐一个css的编辑器:TopStyle
  5. FRY人物扫描之一:jessy

作者: 光芒 分类: 其他方面 标签: ,
  1. 2007年7月17日09:33 | #1

    非常感谢你的网站模板,很不错,在些谢过。

  2. 叉烧猪排饭
    2007年3月31日17:01 | #2

    来了来了~光哥

  3. 2007年3月31日16:55 | #3

    呃~~没那么复杂~~
    看了下LS的blog,只需要改.sidebar和.content的内容就好了~~
    两个分别设置宽度:
    .sidebar {
     float: right;  
     width: 20%;
    }

    .content {
     float: left;
     width: 80%;
    }
    原则上只需要这两行就可以。

  4. 星辰郁结
    2007年3月28日05:49 | #4

    pig,生日快乐!!!grin

  5. 2007年3月27日15:21 | #5

    对我来说太难了

  6. tokey
    2007年3月27日14:41 | #6

    按照上面说的,已经修改了.
    效果 http://tokey.wbfan.com/

    还有点小问题:
    左边栏和博客正文板块之间的间隔有点宽了.
    正文板块整体太靠右了.
    应该修改哪里呢?
    我试着找了几个,都不对.谢谢指教!

  7. tokey
    2007年3月27日14:12 | #7

    谢谢! 收藏了~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.