等高布局

来源：爱问旅游网

等高布局

含义：等高布局就是一行被划分成若干，每一列的高度是相同的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJeSwtMW-1615348655390)(./1615347083326.png)]

利用table实现等高布局
padding-bottom: 9999px; margin-bottom: -9999px;（伪等高布局）实现

6.1登高布局用table实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.1登高布局用table实现</title>
    <style>
        #parent{
            /*table*/
            width: 100%;
            display: table;
        }
        #left,
        #right {
            width: 300px;
            /* td */
            display: table-cell;
        }
        #left{
            background-color: tomato;

        }
        #right{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="left">zhufeng</div>
        <div id="right">辛特湖 被阿尔卑斯山环抱的辛特湖
            湖边的散步，辛特湖被巨大的山峰包围，位于阿尔卑斯山脚下，吸引了许多风景艺术家和诗人。最美丽的小径从拉姆索出发，穿过魔法森林，沿着一条原始的山间小溪来到湖边。在湖边的主题步道上散步，展示19世纪浪漫主义时期画家的信息。许多阿尔卑斯电影都以这个湖为背景。
            </div>
    </div>
</body>
</html>

6.2登高布局用伪等高布局实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.2登高布局用伪等高布局实现</title>
    <style>
        #parent{
            /*table*/
            width: 100%;
            /*溢出隐藏*/
            overflow: hidden;
           
        }
        #left,
        #right {
            width: 300px;
            float: left;
            /*给一个足够大的内填充*/
            padding-bottom: 9999px;
            /*给一个外间距去抵消*/
            margin-bottom: -9999px;
        }
        #left{
            background-color: tomato;

        }
        #right{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="left">zhufeng</div>
        <div id="right">辛特湖 被阿尔卑斯山环抱的辛特湖
            湖边的散步，辛特湖被巨大的山峰包围，位于阿尔卑斯山脚下，吸引了许多风景艺术家和诗人。最美丽的小径从拉姆索出发，穿过魔法森林，沿着一条原始的山间小溪来到湖边。在湖边的主题步道上散步，展示19世纪浪漫主义时期画家的信息。许多阿尔卑斯电影都以这个湖为背景。
            </div>
    </div>
</body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文