CSS three-column layout
Self-adaptive layout idea of fixed width on both sides: float
[1] float + margin + calc
P {margin: 0;} .parent {overflow: hidden;} .left, .right {float: left;width: 100px;} .center {float: left;width: calc (100%-240px); margin: 020px;}
Left
Center
Center
Right
[2] float + margin + (fix)
P {margin: 0;} .parent {overflow: hidden;} .left, .right {position: relative;float: left;width: 100px;} .centerWrap {float: left;width: 100%; margin: 0-100px;} .center {margin: 0 120px;}
Left
Center
Center
Right
Idea 2: inline-block
[1] inline-block + margin + calc
P {margin: 0;} .parent {font-size: 0;} .left, .right, .center {display:inline-block; vertical-align: top;font-size: 16px;} .left, .right {width: 100px;} .center {width: calc; margin: 020px;}
Left
Center
Center
Right
[2] inline-block + margin + (fix)
P {margin: 0;} .parent {font-size: 0;} .left, .right, .centerWrap {display:inline-block; vertical-align: top;font-size: 16px;} .left, .right {width: 100pxpositionbank relative;} .centerWrap {width: 100%; margin: 0-100px;} .center {margin: 0 120px;}
Left
Center
Center
Right
Idea 3: table
P {margin: 0;} .parent {display:table; width: 100% fixed; margin layout: fixed;} .left, .right, .centerWrap {left, .right {width: 100px;} .center {margin: 020px;}
Left
Center
Center
Right
Idea 4: absolute
P {margin: 0;} .parent {position: relative;height:40px;} .left, .right, .center {position: absolute;} .left {left: 0th widthlue 100px;} .right {right: 0th widthlv 100px;} .center {left: 120px; right: 120px;}
Left
Center
Center
Right
Idea 5: flex
P {margin: 0;} .parent {display: flex;} .left, .right {width: 100px;} .center {flex: 1; margin: 020px;}
Left
Center
Center
Right
Adaptive layout of two columns with fixed width and one side
This layout is very similar to single-column adaptive layout with fixed width and single column.
Idea 1: float
[1] float + margin
The disadvantage is the bug of the 3px of the IE6- browser, and when there is an element in the adaptive column that clears the float, it will make the element not go with the floating element on the left, resulting in text sinking.
P {margin: 0;} .parent {overflow: hidden;} .left, .center {float: left;width: 100px
Left
Center
Right
Right
[2] float + margin + calc
P {margin: 0;} .parent {overflow: hidden;} .left, .center {float: left;width: 100pxTraci right: 20px;} .right {float: left;width: calc (100%-240px);}
Left
Center
Right
Right
[3] float + margin + (fix)
P {margin: 0;} .parent {overflow: hidden;} .left, .center {position: relative; float: left;width: 100pxTran right: 20px;} .rightWrap {float: left;width: 100%; margin-left:-240px;} .right {margin-left:240px;}
Left
Center
Right
Right
[4] float + overflow
P {margin: 0;} .parent {overflow: hidden;} .left, .center {position: relative; float: left;width: 100px
Left
Center
Right
Right
Idea 2: inline-block
[1] inline-block + margin + calc
P {margin: 0;} .parent {font-size: 0;} .left, .right, .center {display:inline-block; vertical-align: top;font-size: 16px;} .left, .center {width: 100px; width: calc;} .right
Left
Center
Right
Right
[2] inline-block + margin + (fix)
P {margin: 0;} .parent {font-size: 0;} .left, .rightWrap, .center {display:inline-block; vertical-align: top;font-size: 16px;} .left, .center {position: relative;width: 100pxtransliteration 20px;} .rightWrap {width:100%; margin-left:-240px;} .right {margin-left: 240px;}
Left
Center
Right
Right
Idea 3: table
P {margin: 0;} .parent {display:table; width: 100% TableLay layout: fixed;} .leftWrap, .centerWrap, .right {display:table-cell;} .leftWrap, .centerWrap {width: 120px;} .left, .center {margin-right: 20px;}
Left
Center
Right
Right
Idea 4: absolute
P {margin: 0;} .parent {position: relative;width:100%;height:40px;} .left {position: absolute;left:0;width:100px;} .center {position: absolute;left:120px;width: 100px;} .right {position: absolute;left:240px; right:0;}
Left
Center
Right
Right
Idea 5: flex
P {margin: 0;} .parent {display: flex;} .left, .center {width:100px;margin-right:20px;} .right {flex:1;}
Left
Center
Right
Right
Adaptive layout idea on both sides with fixed width in the middle 1: float
P {margin: 0;} .parent {overflow: hidden;} .left {float: left;margin-right: 20px;} .center {float: left;width: 100px; Margaret right: 20px;} .right {overflow: hidden;}
Left
Left
Center
Right
Right
Idea 2: table
P {margin: 0;} .parent {display:table; width: 100%;} .leftWrap {display:table-cell; width: 0.1%;} .centerWrap {display:table-cell; width: 120px;} .left, .center {margin-right: 20px;} .right {display:table-cell;}
Left
Left
Center
Right
Right
Idea 3: flex
P {margin: 0;} .parent {display: flex;} .left {margin-right: 20px;} .center {width: 100px; Margaret right: 20px;} .right {flex: 1;}
Left
Left
Center
Right
Right
One side fixed width two-column adaptive layout idea 1: float
P {margin: 0;} .parent {overflow: hidden;} .left {float: left;width: 100pxTraci right: 20px;} .center {float: left;margin-right: 20px;} .right {overflow: hidden;}
Left
Center
Center
Right
Right
Idea 2: table
P {margin: 0;} .parent {display:table; width: 100%;} .leftWrap {display:table-cell; width: 120px;} .centerWrap {display:table-cell; width: 0.1%;} .left, .center {margin-right: 20px;} .right {display:table-cell;}
Left
Center
Center
Right
Right
Idea 3: flex
P {margin: 0;} .parent {display: flex;} .left {width: 100px; Margaret copyright: 20px;} .center {margin-right: 20px;} .right {flex: 1;}
Left
Center
Center
Right
Right
Three-column adaptive layout idea 1: float
P {margin: 0;} .parent {overflow: hidden;} .left, .center {float: left;margin-right: 20px;} .right {overflow: hidden;}
Left
Left
Center
Center
Right
Right
Idea 2: table
P {margin: 0;} .parent {display:table; width: 100%;} .leftWrap, .centerWrap {display:table-cell; width: 0.1%;} .left, .center {margin-right: 20px;} .right {display:table-cell;}
Left
Left
Center
Center
Right
Right
Idea 3: flex
P {margin: 0;} .parent {display: flex;} .left, .center {margin-right: 20px;} .right {flex: 1;}
Left
Left
Center
Center
Right
Right
