海口建设工程信息网站,深圳公司网站设计公,临沂企业自助建站系统,西安企业招聘目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 div classfatherdiv classleft左边自适应/divdiv classr… 目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 div classfatherdiv classleft左边自适应/divdiv classright右边自适应/div/div一、左边定宽 右边自适应 实现效果 1.浮动 .left {width: 100px;background-color: rebeccapurple;float: left;
}
.right {width: calc(100%-100px);background-color: green;
}2.利用浮动margin .left {width: 100px;background-color: rebeccapurple;float: left;
}.right {background-color: green;margin-left: 100px;
}3.定位margin .father {position: relative;
}.left {position: absolute;width: 100px;left: 0;background-color: rebeccapurple;
}.right {background-color: green;margin-left: 100px;
}4.flex布局 .father {display: flex;
}.left {width: 100px;background-color: rebeccapurple;
}.right {flex: 1;/* flex: 1可以让其填充剩余的空间以达到拉伸的效果 */background-color: green;
}5.table 布局 .father {width: 100%;display: table;
}.left {display: table-cell;width:300px;background-color: rebeccapurple;
}.right {display: table-cell;background-color: green;
}二、左右成比自适应 1:1 1flex布局 .father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;}
.right {width: 200px;height: 200px;background-color: green;flex: 1;/* 放大且缩小并等分所有空间 *//* flex1等于flex-grow: 1、flex-shrink: 1、flex-basic: 0% */
}table布局 .father {width: 100%;display: table;
}.left {display: table-cell;height: 200px;background-color: rebeccapurple;
}.right {display: table-cell;height: 200px;background-color: green;
}1:2 flex布局 .father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;
}
.right {width: 200px;height: 200px;background-color: green;flex: 2;/* flex1等于flex-grow: 2、flex-shrink: 2、flex-basic: 0% */} 等分所有空间宽度比左右1:2 flex 布局的默认主轴方向为 row 所以 flex-basis 属性 默认是控制元素的 width
