CSS自适应宽度：左右两栏固定宽度，中间栏宽度自适应（双飞翼布局-存在兼容问题）

最新推荐文章于 2023-09-03 19:44:02 发布

Paris one

最新推荐文章于 2023-09-03 19:44:02 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/jianchibuxie0/article/details/106967811

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
       margin:0;
       padding:0
   }
   .header{
       background:indigo;
       text-align:center;
   }
   .wrap{
       margin-top:30px;
   }
   .body{
       overflow:hidden;
   }
   .center{
       float:left;
       width:100%;
       margin-bottom:-1000px;
       padding-bottom:1000px;
       background: #f9f;
   }
   .ct-content{
       margin:0 200px 0 200px;
   }
   .left{
       float:left;
       width:200px;
       margin-bottom:-1000px;
       padding-bottom:1000px;
       background:yellow; 
       margin-left:-100%;
   }
   .right{
       float:left;
       width:200px;
       margin-bottom:-1000px;
       padding-bottom:1000px;
       background:green; 
       margin-left:-200px;
   }
   .footer{
       background:indigo;
       text-align:center;
   }
</style>
<body>
    <div class="wrap">
        <div class="header">
            <p>这是头部</p>
        </div>
        <div class="body">
            <div class="center">
                <div class="ct-content">
                    <p>zuocekan</p>
                    <p>youcelan</p>
                    <p>youcelan</p>
                    <p>youcelan</p>
                    <p>youcelan</p>
                    <p>youcelan</p>

                </div>
            </div>
            <div class="left">
                <p>这是左侧栏</p>
            </div>
            <div class="right">
                <p>这是右侧栏</p>
                <p>这是右侧栏</p>
                <p>这是右侧栏</p>
                <p>这是右侧栏</p>
                <p>这是右侧栏</p>
            </div>
        </div>
        <div class="footer">
            <p>这是底部</p>
        </div>
    </div>
</body>
</html>

思路：

结构：

画布wrap是整个画布，

在它下面建三个div，分别是：头部header，内容center，底部footer。

再内容区center下面建立三个div，分别是：左侧left，右侧right，中间ct-content

样式：

当父元素设置overflow: hidden时产生的影响：触发bfc，使得父元素的高度在计算时包括浮动元素的高度，子元素中高度最大者决定父元素高度。

元素高度根据文字的高度进行自适应。利用padding-bottom正值和margin-bottom负值相互抵消。