建筑设计找工作的网站,上海公司注册查询,佛山企业网站建设教程,西安旅游景点排名前十名在页面或者布局列表中#xff0c;常常有左侧固定#xff0c;右侧自使用的情况#xff0c;接下来#xff0c;这五种方法满足这个需求。一、左边浮动#xff0c;右边margin.box{height: 200px;background-color: skyblue;}.left{float:left;width:100px;height:200px;}.righ…在页面或者布局列表中常常有左侧固定右侧自使用的情况接下来这五种方法满足这个需求。一、左边浮动右边margin.box{height: 200px;background-color: skyblue;}.left{float:left;width:100px;height:200px;}.right{margin-left:100px;height:200px;background:yellowgreen;}二、左边浮动右边hidden。这样右边的盒子就变成了一个绝缘的盒子。(所谓绝缘就是和其他盒子不会有交集).box{height: 200px;background-color: skyblue;}.left{width:100px;height:200px;background:yellowgreen;float:left;}.right{overflow:hidden;height:200px;}三、父盒子设置padding左边盒子定位.box{height: 200px;background-color: skyblue;padding-left: 100px;position: relative;}.left{width: 100px;height: 200px;background-color: yellowgreen;position: absolute;top:0;left:0;}.right{width: 100%;}四、table实现.box{width:100%;}.left{width:100px;height:200px;background:skyblue;}.right{background:yellowgreen;}五、flex实现.box{height: 200px;background-color: skyblue;display: flex; /* 设置为flex容器 */}.left{width: 100px;height: 200px;}.right{height:200px;background:yellowgreen;flex:1; /* 比例设置为1撑满剩余空间 */}
