CSS布局

好记性不如烂笔头~~

一、两列布局

<--! HTML部分-->
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

1. 左侧宽度固定，右侧宽度自适应

关键点在于：右div的margin-left设置为左浮动div的宽度。

• 左浮动 + margin-left

.content {
        width: 300px;
        height: 300px;
        background-color: white;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #ffff80;
    }
    .right {
        height: 200px;
        margin-left: 100px;
        background-color: #80ff80;
    }

最后实现的效果：

2.左侧绝对定位+右侧margin-left
关键点：左div设置为绝对定位，使得左div脱离文档流，类似于左浮动。右侧div的margin-left设置为左div的宽度

.content {
            width: 300px;
            height: 300px;
            position: relative;//注意：父相子绝定位
            background-color: #ff80c0;
        }
        .left {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;//可不用此行代码
            background-color: #ffff80;
        }
        .right {
            height: 200px;
            margin-left: 100px;
            background-color: #80ff80;
        }      
        

还有一种设置绝对定位的方法：

.right {
            width: 200px;//这种情况要设置右div的宽度
            height: 200px;
            /* margin-left: 100px; */
            position: absolute;//将右div也设置成绝对定位，距离右侧的绝对定位
            right: 0;
            background-color: #80ff80;
        }

3.左浮动+margin负值

二、三列布局

三、flex弹性布局