两列布局（左侧定宽，右侧自适应）
2019-10-17 本文已影响0人
蜗牛和曼巴
01.jpg
方法一：float+margin
<body>
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</body>
.left{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.right{
height: 500px;
background: rebeccapurple;
margin-left: 100px;
}
方法二：float+overflow
<body>
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</body>
.left{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.right{
height: 500px;
background: rebeccapurple;
overflow: hidden;
/* margin-left: 100px; */
}
利用浮动脱离标准流。注意清除浮动
方法三：子绝父相定位
<body>
<div class="box">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
</body>
<style>
.box{
position: relative;
}
.left{
width: 100px;
height: 500px;
background: pink;
position: absolute;
left: 0;
top: 0
}
.right{
height: 500px;
background: rebeccapurple;
position: absolute;
left: 100px;
right: 0;
top:0
}
</style>
方法四：flex
<body>
<div class="box">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
</body>
<style>
.box{
display: flex
}
.left{
width: 100px;
height: 500px;
background: pink;
}
.right{
height: 500px;
background: rebeccapurple;
flex: 1
}
</style>
