
如何更改侧边栏的左右位置 [本站原创]
侧边栏的位置控制是由css来决定的,我们来看实例:
侧边栏层的名称是sidebar,内容层是content,我们来看看yahoo这个模板中css的相应代码:
那么如果我们要把一个右侧边栏的模板修改为左侧边栏,只需要将sidebar和content层中float控制的属性对换一下,同时将sidebar-hide的float属性修改一下即可。
侧边栏层的名称是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;
}
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属性修改一下即可。
近年来17173上最有价值的新闻
一个多星期没更新blog了,罪过


2007/03/27 19:32 |
分类: 
姓名: 光芒 (luxzip)


看了下LS的blog,只需要改.sidebar和.content的内容就好了~~
两个分别设置宽度:
.sidebar {
float: right;
width: 20%;
}
.content {
float: left;
width: 80%;
}
原则上只需要这两行就可以。
效果 http://tokey.wbfan.com/
还有点小问题:
左边栏和博客正文板块之间的间隔有点宽了.
正文板块整体太靠右了.
应该修改哪里呢?
我试着找了几个,都不对.谢谢指教!