圣杯布局

原则：

  1. 有一个流动的中间列和两个固定宽度的边列
  2. 中间列在源顺序中是第一位的
  3. 任何列都可以是最长的
  4. 只需要一个额外的div标签
  5. 只需要简单的CSS样式

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>圣杯布局</title>
</head>
<body>
<div id="header">header</div>
 <div id="container">
   <div id="center"  class="column">center</div>
   <div id="left"  class="column"> left</div>
   <div id="right"  class="column"> right</div>
 </div>
<div id="footer">footer</div>
</body>
</html>

css

body{
  margin:0;
  padding:0;
  min-width:550px;  /* 2x LC width + RC width */
}
#header{
  background-color:pink;
}
#container{
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
  height: 200px;
}
#center{
   width:100%;
   background-color:green;
}
#left{
  margin-left:-100%;
  width:200px; /* LC width */
  right:200px; /* LC width */
  background-color:yellow;
}
#right{
  margin-right:-150px; /* RC width */
  width:150px; /* RC width */
  background-color:purple;
}
#footer{
  clear:both;
  background-color:skyblue;
}

效果图：
image

posted @ 2021-10-13 16:10  1940  阅读(8)  评论(0)  编辑  收藏  举报