两栏布局与三栏布局

css两栏自适应布局与三栏自适应布局

两栏布局

方法一：浮动布局

• 左侧固定宽度左浮;
• 右侧margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度

<div id = "left"></div>
<div id = "main"></div>

div{
  height:500px;
}
#left{
  width:300px;
  float:left;
}
#main{
  margin-left:300px;
}

方法二：浮动布局+负外边距（双飞翼两栏版）

• 左侧盒子宽度固定，左浮
• 左侧盒子margin-left：-100%（如果左边盒子在前面，则设置margin-right：-100%；）
• 右边容器宽度设置为100%，左浮
  -右侧容器内容margin-left:左边盒子宽度

<div id = "main">
  <div id = "content"></div>
</div>
<div id = "left"></div>

div{
  height:500px;
}
#left{
  width:300px;
  float:left;
  margin-left:-100%;
  background:red;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:bule;
}

方法三：绝对定位

同方法一类似：

• 左边盒子宽度固定，绝对定位
• 右边盒子设置margin-left：左边盒子宽度；

<div id = "left"></div>
<div id = "main"></div>

div{
  height:500px;
}
#left{
  width:300px;
  position:absolute;
  /*left:0;*/
}
#main{
  margin-left:300px;
}

方法四：flex布局

外部包裹一个盒子，设置display：flex；
左边盒子设置flex：0 0 盒子宽度
（flex最后一项为flex-basis，可用于设置伸缩项的宽度，且优先级高于width）
右边盒子设置flex：1；
（flex设置为1，即flex-grow:1; flex-shrink:1;表示当伸缩项宽度小于伸缩项容器的时候，伸缩项可以填满整个容器）

<div id="container">
    <div id = "aside"></div>
    <div id = "main"></div>
</div>

        div{
            height: 400px;
        }
        #container{
            display:flex;
        }
        #aside{
            flex:0 0 200px;
            background: #000;
        }
        #main{
            flex: 1;
            background: #888;
        }

三栏布局

方法一、二：浮动定位与绝对定位

左右两边的盒子用浮动/绝对定位固定在两边，中间盒子设置margin：0 左右盒子宽度;

方法三：双飞翼布局

• 容器里面放三个盒子，均左浮
• 中间div写在最前面，宽度为100%，两侧盒子宽度固定；
• 给中间盒子添加子盒子，设置margin：0 右盒子宽度 0 左盒子宽度；
• 为左侧栏设置margin-left:-100%；
• 右侧栏设置margin-left：负自身宽度；

注：

1. 默认情况下的中间栏div占据了100%，因此这个左侧栏是在中间栏下方一行，为左侧栏设置margin-left:-100%；，即整个屏幕宽度的100%，令左侧栏与中间栏处于同一行且位于中间栏的最左侧；
2. 这种写法一般将main写在容器里第一个盒子里，因为中间一般会放图片，图片加载需要一定的时间，在结构上放在前面让中间先渲染、先加载提高用户体验

<div id="container">
	<div id = "main">
	  <div id="content"></div>
	</div>
	<div id = "left"></div>
	<div id = "right"></div>
</div>

div{
  height:400px;
}

#main{
  background-color:aqua;
  width:100%;
  float:left;
} 

#content{
  margin-left:200px;
  margin-right:300px;
}

#left{
  width:200px;
  background-color:yellow;
  float:left;
  margin-left:-100%;
}

#right{
  width:300px;
  background-color:orange;
  float:left;
  margin-left:-300px;
}

方法四：圣杯布局

• 容器里面放三个盒子，均左浮
• 中间div写在最前面，宽度为100%，两侧盒子宽度固定；
• 设置中间盒子padding为两侧盒子宽度；
• 为左侧栏设置margin-left:-100%；
• 通过定位调整左边的盒子，让左边盒子不要盖住中间的区域；
• 右侧栏设置margin-left：负自身宽度；
• 通过定位调整右边的盒子，让右边盒子不要盖住中间的区域；

<div id="container">
   <div id = "main">
     <div id="content"></div>
   </div>
   <div id = "left"></div>
   <div id = "right"></div>
</div>

div{
  height:400px;
}

#container{
  padding:0 200px;
}
#main{
  background-color:aqua;
  width:100%;
  float:left;
} 

#content{
  margin-left:200px;
  margin-right:300px;
}

#left,#right{
  width:200px;
  background-color:yellow;
  float:left;
}

#left{
    margin-left:-100%;
    position:relative;
    left:-200px;
}

#right{
  margin-left:-300px;
  position:relative;
  left:-200px; 
}

方法五：flex布局

• 容器里面放三个盒子
• 给容器设置display:flex;
• 两侧盒子定宽
• 中间盒子设置flex:1;

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

     .container{
            display: flex;
        }
        .left,.right{
            width:200px;
            background: red;
        }
        .main{
            flex: 1;
            background: blue;
        }