使用display:table，制作常用布局

两栏布局

我们先来做个基础的html结构

 <div class="wrap" style="background:#ccc;">
        <div class="side">
            <img src="../images/cat0.jpg" alt="">
        </div>
        <div class="content" style="background:pink;">
            <p>猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是起源于古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。
            一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩。夜行性。
            以伏击的方式猎捕其他动物，大多能攀缘上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，捕猎时也不会惊跑鼠。行进时爪子处于收缩状态，防止爪被磨钝，在捕鼠和攀岩时会伸出来。</p>
        </div>
 </div>
复制代码

现在浏览器中是这样的：

1，左侧为图片，右侧自适应浏览器的宽度：

要点：侧栏加float:left;内容加display:table-cell;末尾记得清除浮动；

.side{
    float: left;
}
.content{
    display: table-cell;
}
.wrap::after{
    content:'';
    clear: both;
    display: block;
    visibility: hidden;
    overflow: hidden;
}
复制代码

现在浏览器中是这样的：右侧主要内容可以随浏览器的宽度自适应；

2，等高的三栏布局：

基础html结构：

<div class="list-row">
        <div class="list-cell" style="background:#ccc">
            <p>猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是起源于古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。
                一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩。夜行性。
                以伏击的方式猎捕其他动物，大多能攀缘上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，捕猎时也不会惊跑老鼠</p>
        </div>
        <div class="list-cell" style="background:#f5f5f5">
            <p>
                狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗属于食肉目，分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。
                有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前，发展至今日。被称为“人类最忠实的朋友”，现如今是饲养率最高的宠物。其寿命约十多年。
            </p>
        </div>
        <div class="list-cell" style="background:#ccc">
            <p>
                马(mǎ)，草食性动物。在4000年前被人类驯服。（66个染色体），家马(64个染色体)可以杂交有可育的后代，马在古代曾是农业生产、交通运输和军事等活动的主要动力。
                全世界马的品种约有200多个。随着生产力的发展、
                科技水平的提高以及动力机械的发明和广泛应用，马在现实生活中所起的作用也越来越小。马匹主要用于马术运动和生产乳肉，
                饲养量大为减少。但在有些发展中国家和地区，马仍以役用为主，并是役力的重要来源。
            </p>
        </div>
</div>
复制代码

现在浏览器中是这样的：

加样式

.list-row{
    display: table;
}
.list-cell{
    display: table-cell;
    width: 30%;
    padding: 1.6%;
}
复制代码

现在浏览器的预览为：

每一栏的官渡随浏览器的可视区域宽度大小改变，且三栏始终等高等宽；