CSS布局 两列布局之单列定宽,单列自适应布局思路

前言

说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间，后台管理系统都是常用的

我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果

float

【float + margin】

将定宽的一列使用float，而自适应的一列使用计算后的margin

<style>
    .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合浮动
    .f1 .left{position: relative;float: left;width: 100px;}
    // width: 100% 以免浮动后内容撑开宽度。 margin-left: -100px; 由于宽度设置100%这会挤到下一行去了，利用margin 负值特性来规避
    .f1 .rightWrap{float: left;width: 100%;margin-left: -100px;}
    .f1 .right{margin-left: 120px;}
</style>
<div class="case-box f1" data-case="f1">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示：

【float + margin + calc】

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>
    .f2 .parent{overflow: hidden;zoom: 1;}
    .f2 .left{float: left;width: 100px;margin-right: 20px;}
    .f2 .right{float: left;width: calc(100% - 120px);} // 利用calc可以不同长度单位进行动态计算的特性
</style>
<div class="case-box f2" data-case="f2">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

【float + overflow】

还可以使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

<style>
    .f3 .parent{overflow: hidden;zoom: 1;}
    .f3 .left{float: left;width: 100px;margin-right: 20px;}
    .f3 .right{overflow:hidden;zom:1;} // 触发bfc和haslayout
</style>
<div class="case-box f3" data-case="f3">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

inline-block

inline-block内联块布局的主要缺点是需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【inline-block + margin + calc】

一般来说，要解决inline-block元素之间的间隙问题，要在父级设置font-size为0，然后在子元素中将font-size设置为默认大小

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>
    .f4 .parent{font-size:0;}
    .f4 .left{
        display: inline-block;
        vertical-align: top;
        width: 100px;
        margin-right: 20px;
        font-size: 16px;
    }
    .f4 .right{
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 120px);
        font-size: 16px;
    }
</style>
<div class="case-box f4" data-case="f4">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

【inline-block + margin + margin负值】

<style>
    .f5 .parent{
        font-size: 0;
    }
    .f5 .left{
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100px;
        font-size:16px;
    }
    .f5 .rightWrap{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: -100px;
        font-size: 16px;
    }
    .f5 .right{margin-left: 120px;}
</style>
<div class="case-box f5" data-case="f5">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

table

使用table布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为<table>结构。由于table-cell元素无法设置margin，若需要在元素间设置间距，需要增加结构

<style>
    .f6 .parent{display:table;width: 100%;table-layout: fixed;}
    .f6 .left,.f6 .rightWrap{display:table-cell;}
    .f6 .left{width: 100px;}
    .f6 .right{margin-left: 20px;}
</style>
<div class="case-box f6" data-case="f6">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

absolute

absolute布局的缺点是由于父元素需要设置为relative，且子元素设置为absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

<style>
    .f7 .parent{
        position: relative;
        width: 100%;
        height:40px;
    }
    .f7 .left{
        position: absolute;
        left:0;
        width:100px;
    }
    .f7 .right{
        position: absolute;
        left:120px;
        right:0;
    }
</style>
<div class="case-box f7" data-case="f7">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

flex

flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

[注意]IE9-浏览器不支持

flex布局教程

<style>
    .f8 .parent{
        display: flex;
    }
    .f8 .left{
        width:100px;
        margin-right: 20px;
    }
    .f8 .right{
        flex:1 1 auto;
    }
</style>
<div class="case-box f8" data-case="f8">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

grid

使用栅格布局grid实现

[注意]IE10-浏览器不支持

grid布局详细教程

<style>
    .f9 .parent{
        display: grid;
        /* 子项目分别按照 100px固定宽度 以及1fr的栅格宽度分配 */
        grid-template-columns: 100px 1fr;
        /* 子项目间隙 */
        grid-gap:20px
    }
</style>
<div class="case-box f9" data-case="f9">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示: