CSSflex左右两列布局左侧列宽度⾃适应右侧列宽度固定需要实现的效果如下:
右侧列内容宽度固定(110px),左侧列占满剩余宽度,左侧列宽度⾃适应。
改变浏览器宽度后,左侧列仍旧⾃适应,右侧列固定110px。
缩放浏览器百分⽐后,左侧列仍宽度仍旧⾃适应,右侧列宽度固定110px。
实现代码:
⽗容器设置flex横向布局,⽗容器中有两个⼦元素(左侧列、右侧列),左侧列的宽度使⽤calc动态计算【calc(100% - 11px)】,右侧列宽度固定为110px,这样就实现了本案例效果。css布局左边固定右边自适应
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论