I wrote the centered layout of css before. I will summarize other layouts below. If something is wrong, or it is still not complete, please correct me and add it.
Live: The page effect will not be displayed, you can manually type it again and test it yourself.
(1). Fixed width + adaptive
1. float + overflow
2. float + margin
Note: This layout and style compatibility will be slightly worse, a 3px bug will be generated under IE6, and a bug will also be generated when the p tag under the right is floated, so it needs to be improved. Add a parent to the right Set, by setting the properties of the left and right amounts of Beyonce, generate BFC, and then remove the bug. as follows:
(3). Use table
(4). Use flex
(2). Two columns fixed width + one column adaptive
Principle: Similar to the first method in fixed width + adaptive, float + overflow
(3). Indefinite width + plus adaptive
(1).float + voerflow (similar to two-column fixed width and adaptive)
(2). Use table
(3). Use flex
(4). Two columns of variable width + one column adaptive
Similar to a column of variable width + a column of adaptive
(5). Equal division layout
(1). Using float
(2). Use table
(3). Use flex
(6). Fixed width + adaptive + at the same time to achieve the same height of two blocks
(1). Use float
(2). Use table
(3). Use flex
(4). Use diaplay
