CSS实现三列布局的几种方式

三列布局之全浮动方法

---

全浮动，使用calc设置宽度，不推荐使用calc，兼容不好，并且center不是优先加载

HTML部分

<div class="outer">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
</div>

CSS部分

.left{
      width:100px;
      height:200px;
      background-color:red;
      float:left;
}
.center{
      with:calc(100% - 200px);
      height:200px;
      background-color:#009ff2;
      float:left;
}
.right{
      width:100px;
      height:200px;
      background-color:pink;
      float:left;
}

三列布局之浮动方法

---

left和right浮动，center不设置宽度
center必须写在最后，center不是优先加载

HTML部分

<div class="outer">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS部分

.left{
      width: 100px;
      height: 200px;
      background-color: red;
      float: left;
}
.right{
      width: 100px;
      height: 200px;
      background-color: pink;
      float: right;
}
.center{
      height: 200px;
      background-color: #009ff2;
      margin: 0 100px;
}

三列布局之定位方法

---

center位置随便写，左右margin:100px; 不要设置宽度
left和right分别定位在两边
缺点：无法进行等高布局

HTML部分

<div class="outer">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS部分

.outer{
  position: relative;
}
.left{
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
}
.right{
    width: 100px;
    height: 200px;
    background-color: pink;
    position: absolute;
    right: 0;
    top: 0;
}
.center{
    height: 200px;
    background-color: #009ff2;
    margin: 0 100px;
}

三列布局之圣杯方法

---

保证center优先加载，所以center放在第一个
内容足够小的时候，内容会换行

HTML部分

<div class="out">
    <div class="outer">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

CSS部分

.out{
    overflow: hidden;
}
.outer{
    width: auto;
    margin: 0 100px;
}
.center{
    width: 100%;
    height: 200px;
    background-color: #009ff2； 
    float: left;
}
.left{
    width: 100px;
    height: 200px;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right{
    width: 100px;
    height: 200px;
    background-color:pink;
    float: left;
    margin-left: -100px;
    position: relative;
    right: -100px;
}

三列布局之双飞翼方法

---

1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left，right进行排列
2.给left盒子设置margin-left:-100%; 直接到位，right盒子设置margin-left:100px;也直接到位

HTML部分

<div  class='outer'>
      <div  class='main'>
              <div class='center'>center</div>
      </div>
      <div  class='left'>left</div>
      <div  class='right'>right</div>
</div>

CSS部分

.outer{
      overflow:hidden;
}
.main{
      float:left;
      width:100%;
}
.center{
      margin:0 100px;
      height:100px;
      background-color: #009ff2;
}
.left{
      float:left;
      width:100px;
      height:100px;
      background-color:red;
      margin-left: -100%;      
}
.right{
      float:left;
      width:100px;
      height:100px;
      background-color: pink;
      margin-left: -100px;
}

效果图

最终效果图