常用两栏布局和三栏布局

两栏自适应布局

1.左栏定宽，右栏自适应

1.  左侧absolute或float，定宽，右侧使用padding-left或者margin-left
2. 左侧float，定宽，右侧BFC(display:flow-root或overflow:hidden或display:table-cell)

3.左侧absolute，右侧marign-left

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

.left{position:absolute;width:200px;}
.right{margin-left:200px;}

4.flex

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

.wrap{display:flex}
.left{width:200px}
.right{flex:1}

2.右栏定宽，左栏自适应

1.右栏float定宽,左侧margin-right

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

.right{width:56px;float:right;}
.left{margin-right:56px}

2.左栏先渲染，宽度100%，两栏左浮动，负margin拉回上面

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

.left{width:100%;float:left}
.right{width:56px;float:left;margin-left:-56px;}

3.右侧float定宽，左侧BFC

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

.right{float:right;width:200px;}
.left{display:table-cell;width:2000px;*display:inline-block;*width:auto;}

4.右侧absolute，左侧margin-right

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

.right{position:absolute;width:200px;}
.left{margin-left:200px;}

5.flex

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

.wrap{display:flex}
.left{width:200px}
.right{flex:1}

3.左右两栏都都自适应

左侧float，不定宽，右侧BFC

 

三栏自适应布局

两端固定，中间自适应

1.左右浮动(左右文字环绕，配合左右margin，文字强制换行，勉强实现中间自适应)

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>

.left{float:left;width:200px}
.right{float:right;width:200px}
.mid{margin-left:$leftWidth;margin-right:$rightWidth;word-wrap:break-word}

2.左右浮动，中间BFC(利用左右文字环绕和BFC与float元素不重叠的特性)

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>

.left{float:left;width:200px}
.right{float:right;width:200px}
.mid{
    display:table-cell;
    width:2000px;/*table-cell根据内容设定宽度，要预先设定宽度撑开*/
    *display:inline-block;/*ie6-7触发hasLayout实现自适应*/
    *width: auto;      
}

3.两侧absolute，中间用左右margin撑开

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

.left{position:absolute;width:200px;}
.right{positon:absoulte;width:300px;}
.center{margin-left:200px;margin-right:300px;}

4.flex布局

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    .wrap{display:flex}
    .left{width:200px;}
    .right{width:200px;}
    .center{flex:1}
</style>

5.双飞翼(三列浮动，内容居上，宽度100%，内部元素左右margin留空，left元素负margin 100%拉倒最左端，right元素负margin宽度拉到右端)

<div class="wrap">
    <div class="center">
        <div class="center_in"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.center,.left,.right{float:left}
.center{width:100%}
.center_in{margin-left:$left;margin-right:$right;}
.left{width:$left;margin-left:-100%}
.right{width:$right;margin-left:-$right;}

6.圣杯布局(内容优先)

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

.wrap{padding-left:$left;padding-right:$right;}
.center,.left,.right{float:left;}
.center{width:100%;}
.left{width:$left;margin-left:-100%;position:relative;right:$left;}
.right{width:$right;margin-right:-$right;}

中间固定，两端自适应

1.百分比+负margin

<div class="left">
    <div class="left-inner"></div>
</div>
<div class="mid">
</div>
<div class="right">
    <div class="right-inner"></div>
</div>

$halfMidWidth: $midWidth/2+1

.mid{width:$midWidth;float:left}
.left,.right{float:left;width:50%;margin-left:-$halfMidWidth}
.left-inner{margin-left:$halfMidWidth}
.right-inner{margin-left:$halfMidWidth}

2.flex布局

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

.wrap{display:flex}
.left,.right{flex:1;}
.center{width:600px;}