常见的两列、三列布局，宽高自适应_html/css

来源：比熊情感

1.左侧固定宽度，高度自适应右侧

效果图

pic1.png

pic2.png

html+css

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

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

2.左侧宽度高度固定，右侧自适应宽高

效果图

pic3.png

html+css

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

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

3.左侧、右侧固定宽，中间自适应

效果图

pic4.png

pic5.png

html+css

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

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

但我们这里高度是写死的，如何实现既保持“左右固定宽，中间自适应”，又能够以一边的高度为基准，其他两个高度自适应呢？你可以参考1,2的代码来实现，这里就不写了。