四种简单实用的左固定右自适应简单布局
第一种:
利用浮动
布局:
a、b两个盒子 a为左边盒子 b为右边盒子
a设置固定宽度 左浮动
b设置左外边距=a的宽度
<style>
.a{
width: 200px;
height: 200px;
background:red;
float: left;
}
.b{height: 200px;
background: #449997;
margin-left: 200px;
}
</style>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
第二种:
flex弹性布局
布局:
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
该方法我不太理解 但是确实特别好用
大盒子设置display:flex
a 设置 固定宽度
b设置flex:1
即可实现
<style>
.big{
display: flex;
}
.a{
width: 200px;
height: 200px;
background:red;
float: left;
}
.b{height: 200px;
background: #449997;
flex:1;
}
</style>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
第三种
运用定位
布局:
a、b两个盒子 a为左边盒子 b为右边盒子
a设置固定宽度 绝对定位
b设置左外边距=a的宽度
<style>
.a{
width: 200px;
height: 200px;
background:red;
position: absolute;}
.b{
height: 200px;
background: #449997;
margin-left: 200px;
}
</style>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
第四种
calc方法
布局:
a、b两个盒子 a为左边盒子 b为右边盒子
a设置固定宽度 左浮动
b设置宽度=calc(100% - a的宽度) 右浮动
即可实现左固定右自适应
<style>
.a{
width: 200px;
height: 200px;
background:red;
float: left;
}
.b{height: 200px;
background: #449997;
width:calc(100% - 200px);
float: right;
}
</style>
<body>
<div class="big">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
初入计算机IT行业的一个小虾米