jimdo代码-Jimdo 网站二分栏布局等高的方法(一)

     对于个人网站,或者是博客,二分栏应该是一种比较理想的布局。主栏是内容区,随页面不同而不同,侧栏则放些共用内容。这种布局的缺点是,两栏的高度不可能完全一样,总有一栏有空白地带,看上去给人一种不稳定之感。所以两栏某方面的等高,还是比较重要的。

     以本人的博客为例,就存在这种问题,一是侧栏下是空白,二是主栏下是空白,如下图所示。

Jimdo 网站二分栏布局等高的方法(一)-诸葛草帽电脑工作室

     在网上搜索并学习了一些二栏等高方面的内容,要么浏览器不兼容,要么就是不是纯CSS的,很难用到这个Jimdo网站上来。其中,有一种方法,它的思路是:将侧栏放到主栏的边框上,也就是说,将主栏的一个侧边框设为侧栏的宽度,然后再利用 "margin:-值"把空间留给侧栏。

     我现在的模板就是按这个思路来试验的,主栏的CSS代码是:

 

#content

{

float:left;

width:XXXpx;
background: #fff;

border-right:YYYpx #F5F8FD solid;

margin-right:-YYYpx;

}

 

     其中,XXX是主栏宽度,YYY是右边框宽度,也是侧栏宽度,#F5F8FD既是边框颜色,也是侧栏背景色。

    侧栏的CSS代码是:

#right

{

float:right;

width:YYYpx;
background:#F5F8FD;

}

 

         这种方法的实质,是把侧栏浮动在主栏的右边框上,利用边框背景色,而形成所谓的二栏等高,是简单易行的一种方法,缺点是无法通过边框线实现等高分栏。

 

      本文转自网上邻居 ,很好的方法,但貌似不太适合我的诸葛草帽电脑工作室,我的网站分栏中间有一条分割线,我的目的是想让分割线始终通长,就是不管分栏左边长还是右边长,分割线始终和最长的长度一样,现在我已经找到两种方法实现了,之后会写出来的,呵呵

Write a comment

Comments: 2
  • #1

    淘宝600家园 (Monday, 26 July 2010 21:09)

    诸葛兄:网站做的不错,而且网站排名很高,有什么好的方法,可否分享一下~~~~~

  • #2

    诸葛草帽 (Monday, 26 July 2010 23:15)

    回复淘宝600家园:呵呵,感谢来访,网站一直在改版中,网站seo也在学习中,要是找到什么好方法的话我会第一时间写出来分享的