分别尝试使用Float、Position或者Flexbox来实现如下需求:
- 实现一个两栏布局,左侧固定宽度,右侧根据浏览器宽度进行自适应变化
- 实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变化
- 实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化
-
实现一个三栏布局,左侧固定宽度,中间固定宽度,右侧根据浏览器宽度变化而自适应变化
requirement 1: use float
left content
right content
requirement 1: use position
left content
right content
requirement 1: use flexbox
left content
right content
requirement 2: use float
left content
right content
requirement 2: use position
left content
right content
requirement 2: use flexbox
left content
right content
requirement 3: use float
right content
left content
requirement 3: use position
left content
right content
requirement 3: use flexbox
left content
right content
requirement 4: use float
left content
middle content
right content
requirement 4: use position
left content
middle content
right content
requirement 4: use flexbox
left content
middle content
right content
requirement 5: use float
left content
middle content
right content
requirement 5: use position
left content
middle content
right content
requirement 5: use flexbox
left content
middle content
right content