圣杯布局与双飞翼布局

圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。

圣杯布局

整体布局,main 为外部容器,容器内 middle、left、right 依次排列(注意排列顺序)。

  1. 设置外部容器.main {padding: 0 200px;}
  2. 左中右部分,均设置float: left;
  3. middle 部分.middle {width: 100%;}占满;
  4. 设置.left{margin-left: -100%;}使其占住 middle 的左侧;
  5. 此时 left 覆盖了 middle 的部分,再设置.left{position: relative;right: 200px;width: 200px;}
  6. right 部分设置.right{margin-right: -200px;}即可。
.main {
    padding: 0 200px 0 200px;
    height: 300px;
}

.middle {
    float: left;
    width: 100%;
    height: 300px;
    background: blue;
}

.left {
    position: relative;
    right: 200px;
    float: left;
    width: 200px;
    height: 300px;
    background: red;
    margin-left: -100%;
}

.right {
    float: left;
    width: 200px;
    height: 300px;
    background: yellow;
    margin-right: -200px;
}
<div class="main">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
上一篇:开山.算法之二分查找


下一篇:bootsrtap table