首页 > 代码库 > 左边固定，右边自适应常见方式总结
左边固定，右边自适应常见方式总结
左边固定，右边自适应常见方式总结
html结构如下：
<div class="parent"> <div class="left">我是左边固定</div> <div class="right">我是右边自适应</div></div>
(1)左边向左浮动并固定宽度，右边给margin-left (注：右边这个div一定不能给width:100%)
.parent{ width:100%; height:400px;}.left{ float:left; width:200px; height:100%; background:#afa;}.right{ height:100%; margin-left:200px; background:yellow;}
（2）父元素相对定位，左边绝对定位并给固定宽度，右边margin-left (注：右边这个div一定不能给width:100%)
.parent{ position:relative; width:100%; height:400px;}.left{ position:absolute; left:0; width:200px; height:100%; background:#afa;}.right{ margin-left:200px; height:100%; background:#aba;}
(3)使用flexbox,父元素display:flex,左边元素固定宽度，右边一定记得加flex:1
.parent{ width:100%; height:400px; display:flex;}.left{ width:200px; background:#afa;}.right{ flex:1; background:yellow;}
左边固定，右边自适应常见方式总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。