折腾自己的博客样式，自适应两列布局

前言：

　　最近换了份工作，放弃了做了2年的 .net转成前端开发(这两年其实也是.net跟前端一起做，所以前端也还比较熟)，这是我

第一篇博客，进园也有两年多了，虽然一直想写点什么，不过总感觉自己的文字组织能力太差所以就没写了，不过还是很想写博客，不管内容怎么样，能跟别人分享，也能让别人能更好的了解你

就从今天开始，希望能坚持下去。

折腾自己的博客：

　　暂时没什么好写的，就写下今天改的样式，在博客模版下选了个elf的主题还蛮喜欢的，就选它了，不过发了篇文章发现主题是固定1000px宽度的，现在普遍都是22寸宽屏看起来显得太小气了，

而且太小看起来总感觉眼睛好累，既然作为一个前端开发，改个自适应该还是很简单的，首先用chrome看了下页面结构

 

<div id="mian">
  /**左边**/
  <div id="mainContent">
       <div class="forFlow"></div>
  </div>
  /**右边**/
  <div id="sideBar"></div>
</div>

 

 css代码：

 

#main{ width: 1000px; margin: 20px auto 0;}
#mainContent{ float:left;width:740px}
#sideBar{ float:right:width:250px;}

 

要实现的效果是#mainContent文章列表是自适应，sideBar固定的，按我平时的写法，首先#main跟#mainContent的宽度去掉，#mainContent添加样式margin-left:-250px;让它向左移动250px,那250px会塞进sidebar层，

这样基本实现了自适应，但是左列会有250PX隐藏了，只要给里面的DIV forFlow添加margin-left:250px就可以，这样兼容所有浏览器的自适应的两列布局就完成了，最后修改代码如下

 

#main{ width:100%}
#mainContent{width:99%;margin-left:-250px;}
#mainContent .forFlow{margin-left:265px;}
#sideBar{ margin-right:5px;}