开发学院网页设计DivCss 垂直三栏布局拥有相同高度的方法 阅读

垂直三栏布局拥有相同高度的方法

 2008-07-11 19:24:16 来源:WEB开发网   
核心提示:流动布局了解定宽布局之后,我尝试把这个方法用到动态布局中去,垂直三栏布局拥有相同高度的方法(2),边栏仍然需要设置固定宽,很多浏览器不支持border:**%的属性,但是我门可以使中间栏目自适应,CSS:#container{ background-color:#0ff; overflow:hidden; mar

流动布局

了解定宽布局之后,我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽,很多浏览器不支持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 

Tags:垂直 布局 拥有

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接