两栏自适应布局与高度自适应

两栏自适应

float + BFC

使用 float 让 left 块脱离文档流，使用 BFC 规则，让 right 块宽度自适应，代码如下

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .left {
        float: left;
        width: 100px;
        height: 100px;
        background: lavender;
    }

    .right {
        background: lightcoral;
        height: 100px;
        overflow: hidden;
    }
</style>

<!-- 页面 DOM 结构 -->
<div class="Test">
    <div class="left"></div>
    <div class="right"></div>
</div>

类似圣杯布局

给父元素设定 padding-left ， right 元素宽度 100% ，left 元素通过 设定 left 和 margin-left 属性拉取到前面

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Test {
        padding-left: 100px;
    }

    .left,
    .right {
        float: left;
    }

    .left {
        position: relative;
        left: -100px;
        background: lavender;
        margin-left: -100%;
        width: 100px;
        height: 100px;
    }

    .right {
        background: lightpink;
        width: 100%;
        height: 100px;
    }
</style>

<!-- DOM 结构 -->
<div class="Test">
    <div class="right"></div>
    <div class="left"></div>
</div>

flex

flex布局可以参考我之前的文章 Flex布局（CSS弹性盒子）

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Test {
        display: flex;
    }

    .left {
        background: lavender;
        width: 100px;
        height: 100px;
    }

    .right {
        background: lightpink;
        flex: 1;
        height: 100px;
    }
</style>

<!-- DOM 结构 -->
<div class="Test">
    <div class="left"></div>
    <div class="right"></div>
</div>

上面三种布局都能达到下面的结果：

 

高度自适应

通过 margin-bottom 和 padding-bottom 将元素往下拉、往上挤，具体参考代码

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Test {
        width: 300px;
        overflow: hidden;
    }

    .left,
    .right {
        float: left;
    }

    .left {
        background: lavender;
        width: 100px;
        height: 100px;
    }

    .right {
        background: lightpink;
        width: 200px;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
    }
</style>

<!-- DOM 结构 -->
<div class="Test">
    <div class="left"></div>
    <div class="right"></div>
</div>

结果：

两列布局与高度自适应 ​​​​​​

方法一：用上面方法两者相结合

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Test {
        padding-left: 100px;
        overflow: hidden;
    }

    .left,
    .right {
        float: left;
    }

    .left {
        position: relative;
        left: -100px;
        background: lavender;
        width: 100px;
        height: 100px;
    }

    .right {
        background: lightpink;
        width: 100%;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
    }
</style>

<!-- DOM 结构 -->
<div class="Test">
    <div class="right"></div>
    <div class="left"></div>
</div>

方法二：flex 布局

<!-- CSS 样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Test {
        display: flex;
    }

    .left {
        background: lavender;
        width: 100px;
        height: 100px;
    }

    .right {
        background: lightpink;
        flex: 1;
    }
</style>

<!-- DOM 结构 -->
<div class="Test">
    <div class="left"></div>
    <div class="right"></div>
</div>