公共样式
<style>
.left {
width: 100px;
background: red;
}
.right {
background: yellowgreen;
}
</style>
<div class='container'>
<div class='left'>我是左侧,固定宽度为100px</div>
<div class='right'>我是右侧,宽度自适应,多多指教</div>
</div>
- float+margin-left方案
.left-float { float: left }
.right-margin{margin-left: 120px;}
.container-float {overflow:hidden} // 父元素清除浮动
缺点:
需要清除浮动
需要计算右侧盒子的margin-left
- 两个子元素浮动
.float {
float: left;
box-sizing: border-box;
} // 子元素
.container-clearfix {
overflow:hidden;
box-sizing: content-box
;} // 父元素清除浮动
.calc-right{ width: calc(100% - 120px); } // 右侧元素
缺点:
需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing。
父元素需要清除浮动
- 左侧设置position: absolute;右侧设置margin-left方法
.positon-left{
position: absolute;
}
.right-margin{
margin-left: 100px;
}
缺点:
使用了绝对定位,若是用在某个div中,需要更改父容器的position。
没有清除浮动的方法,若左侧盒子高于右侧盒子,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况
4 使用弹性盒子flex布局
.container-flex {
display: flex;
align-items: flex-start; // 让子元素高度自适应
/* justify-content: flex-start; */设置这个属性会让右侧的盒子跟左侧盒子的 高度一样高
}
.left-flex {
flex: 0 0 auto;
}
.right-flex{
flex: 1 1 auto
}
代码简洁,一般推荐这种写法
缺点:
IE低浏览器的兼容性不是很好,不过现在ie浏览器在整个浏览器的市场份额不是很大,用Google浏览器比较多,除非公司有特殊要求要兼容低版本ie
5 使用grid布局
.container-grid {
display: grid;
grid-template-columns: 100px 1fr;
align-items: flex-start;
}
.left-grid, .right-grid {
box-sizing: border-box;
}
.left-grid {
grid-column: 1;
}
.right-grid {
grid-column: 2;
}
这种新的布局方式跟flex布局有些类似,可以试着用下,不懂得话,可以看阮一峰的教材
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
6 使用inline-box方式布局
.inline-block { // 两个子元素设置样式
display: inline-block;
vertical-align: top;
font-size: 14px;
box-sizing: border-box;
}
.container-block {
box-sizing: content-box;
font-size: 0;
}
.inline-right { //右侧的宽度
width: calc(100% - 100px);
}
缺点:
需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing
需要消除空格字符的影响
需要设置vertical-align: top满足顶端对齐
7 . 使用float+BFC方法,左边设置float:left,右侧是设置oveflow:hidden
.container-bfc {
overflow: hidden;
}
.bfc-left {
float: left;
}
.bfc-right {
margin-left: 0;
overflow: hidden;
}
缺点:
父元素需要清除浮动