Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.