Preface
I believe everyone knows about flex elastic layout. It is a property in css3, but it has certain compatibility issues. During the interview a few days ago, the author met the interviewer who needed to design a two-column layout. Of course I said the parent element should be flex, but I needed to use basic CSS2 attribute layout, which was silly. . .
Requirements: two-column layout, fixed width on the left and adaptive on the right
html The layout is as follows
我是定宽左
我是自适应右
1. flex layout
##
#father{ display: flex; } #left{ background: red; height: 200px; width: 200px; } #right{ background: green; height: 200px; flex:1; }
Note:
When laying out multiple columns, you need to write the html code of the floating element in front of the adaptive element. For example, the following is the code for the three-column layout:
我是左定宽
我是中间自适应
我是右定宽
The above is the detailed content of How to implement two-column and three-column layout in css2. For more information, please follow other related articles on the PHP Chinese website!