常见的两列、三列布局，宽高自适应_html/css
来源：动视网
责编：小采
时间：2020-11-27 16:37:19
常见的两列、三列布局，宽高自适应_html/css
常见的两列、三列布局，宽高自适应_html/css_WEB-ITnose: 今天是猴年的第一天班，也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局：1.左侧固定宽度，高度自适应右侧；2.左侧宽度高度固定，右侧自适应宽高；3.左侧、右侧固定宽，中间自适应。 1.左侧固定宽度，高度自适应右侧 效果图 pic
导读常见的两列、三列布局，宽高自适应_html/css_WEB-ITnose: 今天是猴年的第一天班，也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局：1.左侧固定宽度，高度自适应右侧；2.左侧宽度高度固定，右侧自适应宽高；3.左侧、右侧固定宽，中间自适应。 1.左侧固定宽度，高度自适应右侧 效果图 pic
1.左侧固定宽度，高度自适应右侧
效果图
pic1.png
pic2.png
html+css你看代码，左侧确实没有定高，右侧也没有定宽。 2.左侧宽度高度固定，右侧自适应宽高
效果图
pic3.png
html+css 左侧宽度高度固定，右侧自适应宽高 left right
3.左侧、右侧固定宽，中间自适应
效果图
pic4.png
pic5.png
html+css 左侧、右侧固定宽，中间自适应 center left right
但我们这里高度是写死的，如何实现既保持“左右固定宽，中间自适应”，又能够以一边的高度为基准，其他两个高度自适应呢？ 你可以参考1,2的代码来实现，这里就不写了。
常见的两列、三列布局，宽高自适应_html/css
常见的两列、三列布局，宽高自适应_html/css_WEB-ITnose: 今天是猴年的第一天班，也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局：1.左侧固定宽度，高度自适应右侧；2.左侧宽度高度固定，右侧自适应宽高；3.左侧、右侧固定宽，中间自适应。 1.左侧固定宽度，高度自适应右侧 效果图 pic
