两栏布局左自适应右固定。
(1)左浮动,右固定
左边浮动,右边利用margin - left将右边的盒子顶出去,自适应添加了剪切效果
.main{
padding: 0;
margin: 0;
height: 100px;
}
.left{
float: left;
width:100px;
height: 100px;
background: red;
font-size: 10px;
}
.right{
width: auto;
height: 100px;
margin-left: 110px;
background: aqua;
overflow: hidden;/*右边自适应内容出框后,直接裁剪掉*/
}
(2)弹性盒子
利用flex进行两栏布局时,我们要知道flex-shrink 、flex-grow、flex-basis的用法。flex-basis是前两个元素的基础。这里的overflow添加了滑动块属性。
.main{
display: flex;
height: 100px;
}
.left{
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100px;//与flex:0 0 100px;等效
background: red;
font-size: 10px;
}
.right{
flex: auto;
height: 100px;
margin-left: 10px;
background: aqua;
overflow: scroll;
}
(3)position:absolute
父级元素设置相对定位,左边元素设置绝对定位,宽度固定右边,基于左边的宽度加一个间距。和float有些类似。
- 和float一样,右边无限小时会被隐藏
.main{
position: relative;
height: 100px;
}
.left{
display: block;
position: absolute;
width: 100px;
height: 100xp;
background: red;
font-size: 10px;
}
.right{
height: 100px;
margin-left: 110px;
background: aqua;
}
(4)右边绝对定位
这种方法待定,感觉右边的框没有自适应
.main{
position: relative;
height: 100px;
}
.left{
width: 200px;
height: 100px;
background: red;
}
.right{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: aqua;
}
(5)双inline-block
给左右两盒子都设置成行内块,使其水平排列,但是因为要将左右盒子的border+padding+margin算进去,所以要添加一个box-sizing:border-box和box-sizing:content-box;,让其缩回父元素宽度。在输入div标签时因为换了行导致两个盒子中间多出来了4个像素,所以这里要设置一个font-size清除空隙。
- 但这样设置后,右侧盒子会流动到下一行
*{
padding:0;
margin:0;
}//清除浏览器默认的边距
.main{
overflow:hidden;
height: 100px;
font-size;0;
}
.left{
box-sizing: border-box;
display: inline-block;
vertical-align: top;
font-size: 14px;
width: 200px;
height: 100px;
background: red;
}
.right{
box-sizing: border-box;
width: calc(100%-200px);
display: inline-block;
vertical-align: top;
font-size: 14px;
height: 100px;
background: aqua;
}
(6)float+BFC方法
左边浮动,右边和字通过overflow形成了BFC,右侧盒子不会与浮动的元素重叠,自适应是因为右侧的盒子是块元素
- 会掉落到下一行
*{
padding: 0;
margin: 0;
}
.main{
overflow: auto;
}
.left{
float: left;
margin-right: 20px;
width: 200px;
height: 100px;
background: red;
}
.right{
margin-left: 0;
overflow: auto;
background: aqua;
}
(7)grid方案,最新的解决方案
需要默认列等高,在使用margin-left的时候,grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。
*{
padding: 0;
margin: 0;
}
.main{
display: grid;
grid-template-columns: 220px 1fr;
align-items: start;
}
.left{
box-sizing: border-box;
grid-column: 1;
width: 200px;
height: 100px;
background: red;
}
.right{
box-sizing: border-box;
grid-column: 2;
background: aqua;
}