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

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

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%

{{collectdata}}

网友评论0