乐趣区

关于css:CSS圣杯布局双飞翼布

jiezi

三栏布局中，经典中的经典应该就是圣杯布局、双飞翼布局没跑了。

先相熟一下圣杯布局、双飞翼布局中的特点：

  • 两侧定宽，两头自适应
  • 次要内容优先渲染

圣杯布局

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

(1) 首先设置好 .main、.left、.right 的宽度并浮动，为左右两列预留出空间。

.container {
  padding-left: 200px;  /* 预留左侧空间，为.left 宽度 */
  padding-right: 300px; /* 预留右侧空间，为.right 宽度 */
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  width: 300px;
  height: 300px;
  background: #f56c6c;
}


(2) 通过 负 margin、position把 <div class="left">left</div> 挪动到左侧预留地位。

.left {
  float: left;
  margin-left: -100%;   /* 挪动到左侧，100% 是一个父元素宽度，这里也就是.container 的宽度 */
  position: relative;   /* 因为.container 设置了 padding */
  right: 200px;         /* 所以须要再向左挪动本身宽度,left: -200px; 也是能够的 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}


(3) 通过 负 margin把 <div class="right">right</div> 挪动到右侧预留地位。

.right {
  float: left;
  margin-right: -300px; /* 挪动到右侧，本身宽度 */
  width: 300px;
  height: 300px;
  background: #f56c6c;
}


残缺代码：

.container {
  padding-left: 200px;  /* 预留左侧空间，为.left 宽度 */
  padding-right: 300px; /* 预留左侧空间，为.right 宽度 */
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  margin-left: -100%;   /* 挪动到左侧，100% 是一个父元素宽度，这里也就是.container 的宽度 */
  position: relative;   /* 因为.container 设置了 padding*/
  right: 200px;         /* 所以须要再向左挪动本身宽度,left: -200px; 也是能够的 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  margin-right: -300px; /* 挪动到右侧，本身宽度 */
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

双飞翼布局

<div class="main-wrap">
    <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

(1) 首先设置好 .wrap、.main-wrap、.left、.right 的宽度并浮动，为左右两列预留出空间。

.main-wrap {
  float: left;
  width: 100%;  /* 这个必须设置，不然浮动起来，没宽度 */
}
.main {
  margin-left: 200px;   /* 预留左侧空间，为.left 宽度 */
  margin-right: 300px;  /* 预留左侧空间，为.right 宽度 */
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  width: 300px;
  height: 300px;
  background: #f56c6c;
}


(2) 通过 负 margin把 <div class="left">left</div> 挪动到左侧预留地位。

.left {
  float: left;
  margin-left: -100%;   /* 挪动到左侧，100% 是一个父元素宽度，这里也就是 body 的宽度 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}


(3) 通过 负 margin把 <div class="right">right</div> 挪动到右侧预留地位。

.right {
  float: left;
  margin-left: -300px;  /* 挪动到右侧，本身宽度 */
  width: 300px;
  height: 300px;
  background: #f56c6c;
}


残缺代码：

.main-wrap {
  float: left;
  width: 100%;
}
.main {
  margin-left: 200px;   /* 预留左侧空间，为.left 宽度 */
  margin-right: 300px;  /* 预留左侧空间，为.right 宽度 */
  height: 300px;
  background: #67c23a;
}
.left {
  float: left;
  margin-left: -100%;   /* 挪动到左侧，100% 是一个父元素宽度，这里也就是 body 的宽度 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}
.right {
  float: left;
  margin-left: -300px;  /* 挪动到右侧，本身宽度 */
  width: 300px;
  height: 300px;
  background: #f56c6c;
}
退出移动版