常见自适应布局

1.左侧固定宽度,高度自适应右侧
效果图

常见自适应布局_第1张图片
常见自适应布局_第2张图片

·html+css

左侧固定宽,自适应右侧高度
left
right

你看代码,左侧确实没有定高,右侧也没有定宽。

2.左侧宽度高度固定,右侧自适应宽高
效果图

常见自适应布局_第3张图片

·html+css

  左侧宽度高度固定,右侧自适应宽高  
left
right

你看代码,左侧确实定了宽高,右侧宽高都没有定。

3.左侧、右侧固定宽,中间自适应
效果图

常见自适应布局_第4张图片
常见自适应布局_第5张图片

·html+css

  左侧、右侧固定宽,中间自适应  
center
left
right

你看代码,左侧、右侧都固定了宽度,中间宽度自适应了。关键点是:float:left配合margin-left使用。同时center的div写在了左右的前面,更加符合语义化。

你可能感兴趣的:(常见自适应布局)