番禺制作网站企业,企业品牌类网站,网站开发的app,商务网站创建设计方案1. 利用浮动
将左边元素宽度设为200px#xff0c;并设置向左浮动将右边元素的margin-left设为200px#xff0c;宽度为auto#xff08;默认为auto#xff0c;撑满整个父元素#xff09;
.outer {height: 100px;
}
.left {float: left;width: 200px;
}
.right {margin-lef…1. 利用浮动
将左边元素宽度设为200px并设置向左浮动将右边元素的margin-left设为200px宽度为auto默认为auto撑满整个父元素
.outer {height: 100px;
}
.left {float: left;width: 200px;
}
.right {margin-left: 200px;width: auto;
}
!-- HTML结构如下 后面实现也基于这个结构--
div classouterdiv classleft stylebackground-color: green;left/divdiv classright stylebackground-color: yellow;right/div
/div2. 浮动 overflow
左边元素固定大小并左浮动右边元素设置overflow: hidden这样右边就触发BFCBFC的区域不会与浮动元素发生重叠
.outer{
height: 100px;
}
.left{width: 200px;float: left;
}
.right{overflow: hidden;
}3. 利用flex布局
父元素设置display: flex左边元素设置固定宽度200px右边元素设置flex: 1
.outer {display: flex;height: 100px;
}
.left {width: 200px;
}
.right {flex: 1;
}4. 绝对定位
父元素设为relative定位左边元素设置absolute定位并设宽度200px右边元素的margin-left设置为200px
.outer {position: relative;height: 100px;
}
.left {position: absolute;width: 200px;
}
.right {margin-left: 200px;
}
