流动布局

了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。

CSS:
#container{
  background-color:#0ff;
  overflow:hidden;
  margin:0 100px;
  padding-right:150px; /* The width of the rail */
}
* html #container{
  height:1%; /* So IE plays nice */
}
#content{
  background-color:#0ff;
  width:100%;
  border-right:150px solid #f00;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
  margin-right:-150px;
}

3个栏目自适应布局
方法简单，不需要引用图片，没有BUG.

HTML:

<div id="container">
  <div id="center">Center Column Content</div>
  <div id="leftRail">Left<br /> Sidebar</div>
  <div id="rightRail">Right Sidebar</div>
</div>

CSS:

body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;
  width:100%;   
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* So IE plays nice */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

上一页  [1] [2]