Implementation method of three column layout (generally, it is required to write as much as possible)

Two columns of fixed width and one column of adaptive ：

1、 Use float+margin：

to div Set up float：left,left Of div Add attribute margin-right：left and center The interval of px,right Of

div Add attribute margin-left：left and center The sum of the widths plus the spacing

2、 Use float+overflow：

to div Set up float：left, Give again right Of div Set up overflow:hidden. So the two boxes float , another

A box triggers bfc Achieve adaptive

3、 Use position：

Parent div Set up position：relative, Three children div Set up position：absolute, This needs to be calculated well

Set the position according to the width and spacing of the sub , Good compatibility ,

4、 Use table Realization ：

Parent div Set up display：table, Set up border-spacing：10px// Set the spacing , Take any value , Sub level div

Set up display:table-cell, This method has good compatibility , It is applicable to the case where the height and width are unknown , however margin

invalid , The design interval is troublesome ,

5、flex Realization ：

parent Of div Set up display：flex;left and center Of div Set up margin-right; then right Of div

Set up flex：1; It looks like right The adaptive , however flex Compatibility is not good

6、grid Realization ：

parent Of div Set up display：grid, Set up grid-template-columns attribute , Fix the width of the first column and the second column

degree , The third column auto.

For the layout with fixed width on both sides and adaptive in the middle , For this layout, we need to put center On the front , You can use double flight

Wing layout ： The holy grail layout , To achieve , You can also use grid,table,flex,position Realization