css 双飞翼布局和圣杯布局

CSS布局技术有很多种，其中双飞翼布局和圣杯布局是常见的两种。以下将分别介绍这两种布局技术。

双飞翼布局

div class="container">
      div class="left">
    /div>
      div class="content">
    /div>
      div class="right">
    /div>
    /div>
.container {
      margin: 0 auto;
}
.left,.content,.right {
      float: left;
      width: 100%;
}
.left {
      margin-left: -100%;
      background-color: #ccc;
}
.content {
      margin: 0 200px;
      background-color: #eee;
}
.right {
      margin-right: -200px;
      background-color: #ccc;
}
    

在双飞翼布局中，容器和三个子元素都采用了浮动定位，左侧和右侧列使用负边距使其脱离文档流，中间列使用margin值调整位置，从而最终实现了左右列固定，中间列自适应的布局效果。

圣杯布局

div class="container">
      div class="content">
    /div>
      div class="left">
    /div>
      div class="right">
    /div>
    /div>
.container {
      margin: 0 auto;
      padding: 0 200px;
}
.content,.left,.right {
      float: left;
      position: relative;
}
.content {
      width: 100%;
}
.left {
      left: -200px;
      width: 200px;
      margin-left: -100%;
      background-color: #ccc;
}
.right {
      right: -200px;
      width: 200px;
      margin-right: -100%;
      background-color: #ccc;
}
    

在圣杯布局中，容器和三个子元素都采用了浮动定位，并使用相对定位和负边距控制位置与宽度，从而实现了左右列固定，中间列自适应的布局效果。

总的来说，双飞翼布局和圣杯布局的原理基本相同，都是通过浮动和负边距控制位置实现布局效果。两者的最终效果比较相似，但具体实现方式有所不同，使用场景也不完全相同。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！