css布局实现左侧固定右侧自适应的4种方式

我们在左右布局的时候经常会碰到左侧宽度需要固定,右侧宽度自适应的场景,那么通过css怎么实现呢,下面介绍4种方式来实现这种效果。
一、浮动
<div class="content" >
<div style="float: left;"></div>
<div style="margin-left: 50px;"></div>
</div>
<style>
.content {
width: 100%;
height: 50px;
border: solid 1px;
margin-top: 10px;
}
.content div:first-child {
background: red;
height: 50px;
width: 50px;
}
.content div:last-child {
background: green;
height: 50px;
}
</style>
二、绝对定位
<div class="content">
<div style="position: absolute"></div>
<div style="overflow:hidden;"></div>
</div>
<style>
.content {
width: 100%;
...点击查看剩余70%
网友评论0