css实现左侧元素固定,右侧自适应填满

方法一:flex布局,左侧flex-grow: 0, flex-shrink: 0,flex-basis: 固定宽度数值;右侧flex-grow: 1, flex-shrink: 1,flex-basis: 0px(或者不设置);

方法二:float+margin, 左侧元素float:left;给一个固定宽度,右侧元素margin-left: 左侧元素的宽度;

方法三:float+float,左侧元素float:left;给一个固定宽度,右侧元素float:right;宽度设为calc(100% - 左侧元素的宽度);

方法四:父级元素的display: table, 左侧元素display:table-cell且给一个固定宽度,右侧元素display: table-cell,不设置宽度即可;

方法五:absolute+margin, 左侧元素设置一个绝对定位定位在左侧且给一个固定宽度, 右侧元素,充满空间且给一个margin-left为左侧元素的宽度;

posted @ 2023-03-10 10:05  Ares_perfect  阅读(517)  评论(0编辑  收藏  举报