html经典布局（两列自适应，三列自适应，伪等高，真等高）

最新推荐文章于 2025-03-21 21:21:34 发布

weixin_43370067

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量770

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_43370067/article/details/105690879

版权

本文介绍了HTML布局中的自适应和等高布局方法，包括两列和三列自适应布局的实现，以及伪等高和真等高布局的细节。重点讲解了圣杯布局和双飞翼布局的原理，并提供了实现等高布局的关键代码和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自适应:随着浏览器窗口宽度大小自己调整宽度的盒子就叫自适应盒子(相对关系%)

1. 两列自适应布局

原理: 两个盒子左列的盒子固定宽度（px），右列盒子宽度自适应(%)
实际案例：B站的创作中心
**

    <style>
        * {
   
            padding: 0;
            margin: 0;

        }
        .left {
   
            /* 固定宽度 */
            width:200px;
            height: 400px;
            background-color: hotpink;
            /* 脱标 盖住不脱标盒子 */
            float: left;
            /* 定位和浮动  */
        }
        /* 自适应 100%---> 左列盖在右列身上 */
        .right {
   
            width: 100%;
            height: 400px;
            background-color: olive;    

        }
       
    </style>
</head>
<body>   
        <div class="left"></div>
        <div class="right">
            wqgdewquydewyd efchewvcv  ewdw
        </div>
   
</body>
</html>

2、三列自适应布局

原理:** 三列左中右左右两列固宽中列100% (不通过绝对定位就通过浮动和相对定位和外边距实现稳定的布局)

在这里插入图片描述

圣杯布局

(1)中间100%宽度的盒子一定要写在结构的最上面

(2) 三列浮动，三列本在一排左列橙色盒子利用margin-left:-100%;外边距向左移动100%的宽度，右列利用外边距向左移动自身的宽度，达到三列在一排的效果。
在这里插入图片描述

(3) 因为中间列的内容会被两侧盒子遮盖，中列内容居中给左外侧大盒子container设置左右两侧内边距padding
在这里插入图片描述

(4)左右两列在利用position：relative相对定位移动(left right)自身宽度的负值，中间列的内容就可以直接显示了。（中间单词不空格的话，会有被盒子遮盖的效果）

在这里插入图片描述
设置container的最小宽度min-width:避免页面宽度太小时被挤下

 <style>
        .container {
    
                     /* 内边距  */
            padding-left: 200px;
            padding-right: 200px;
            /*清除浮动*/
            overflow: hidden;
        }

        .center {
    
            width: 100%;
            height: 400px;
            float: left;
            background-color:yellowgreen;
   

        }
        .left {
    
            width: 200px;
            height: 400px;
            float: left;
            background-color: chocolate;
            margin-left: -100%;
            position: relative;
            left: -200px;


        }

        .right {
    
            width: 200px;</

最低0.47元/天解锁文章