双飞翼布局（三列布局实现两侧固定，中间自适应）

最新推荐文章于 2023-04-12 14:35:25 发布

尽欢兮

最新推荐文章于 2023-04-12 14:35:25 发布

阅读量364

点赞数

分类专栏：内容小记文章标签： html css

本文链接：https://blog.csdn.net/Ldcrle/article/details/119078113

版权

内容小记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

双飞翼布局（三列布局实现两侧固定，中间自适应）

双飞翼布局（三列布局实现两侧固定，中间自适应）

案例要求

实现一个三列布局：

布局为左中右三部分
左右两侧的宽度固定
中间内容区宽度能够自适应

双飞翼布局实现流程概要

第一步：使用float属性让左中右三列浮动
第二步：使用负margin属性让左右两列与中间列处于同一水平线上
第三步：在中间列增加一个div内容元素，设置margin值为左右两列的宽度
第四步：清除浮动，使父元素高度正常显示

注意细节点

左中右三个盒子的顺序有要求

<div class="center">               //此处注意三个盒子的顺序，要先写中间的盒子
<div class="content">自适应内容区</div>
</div> 
<div class="left"></div>
<div class="right"></div>

两侧的div实际上时覆盖在中间div的上层显示的，所以要使中间div首先显示，且宽度为100%

负margin属性的使用

当三个盒子都浮动后如图：
在这里插入图片描述

若使盒子处于同一水平线上使用负margin：

对于left盒子，要在内容区的左侧显示，margin-left值为-100%（center的宽度）；
对于right盒子，要显示在内容区右侧，margin-left值为负自己本身的宽度。（-200px）；

中间列内容元素的显示

当三个盒子同处于一个水平线后，内容区显示的内容会被两侧盒子覆盖，故要设置内容区的左右margin，值为两侧盒子的宽度；

.content{
    margin: 0px 200px;   //内容区左右margin值为两侧的宽度
}

在这里插入图片描述

详细代码

    <title>双飞翼布局</title>
<style>
.box{
    border: 1px solid red;
    width:800px;
    margin:0 auto;
    overflow: hidden;
}
.center{
    float: left;
    width: 100%;
    height:500px;
    background-color: #4c8045;
}
.left{
    float: left;
    background-color: #dba893;
    width: 200px;
    height: 500px;
    margin-left: -100%; //要保证三个盒子在同一水平线，且左侧盒子在中间盒子的左侧

}

.right{
    float: left;
    background-color:#788a74;
    width:200px;
    height:500px;
    margin-left: -200px;  //margin值为右侧盒子自身的宽度
}
.content{
    margin: 0px 200px;   //内容区左右margin值为两侧的宽度
}
</style>
</head>
<body>
<div class="box">
<div class="center">               //此处注意三个盒子的顺序，要先写中间的盒子
<div class="content">自适应内容区</div>
</div> 
<div class="left"></div>
<div class="right"></div>

</div>    
</body>

尽欢兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局（三列布局实现两侧固定，中间自适应）

双飞翼布局（三列布局实现两侧固定，中间自适应）双飞翼布局（三列布局实现两侧固定，中间自适应）双飞翼布局（三列布局实现两侧固定，中间自适应）案例要求双飞翼布局实现流程概要注意细节点左中右三个盒子的顺序有要求负margin属性的使用中间列内容元素的显示详细代码案例要求实现一个三列布局：布局为左中右三部分左右两侧的宽度固定中间内容区宽度能够自适应双飞翼布局实现流程概要第一步：使用float属性让左中右三列浮动第二步：使用负margin属性让左右两列与中间列处于同一水平线上第三步：在中间列
复制链接

扫一扫