2020-12-13

最新推荐文章于 2023-04-18 17:25:58 发布

qq_45688556

最新推荐文章于 2023-04-18 17:25:58 发布

阅读量141

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_45688556/article/details/111119247

版权

双飞翼布局
两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型经典布局方案
1、三个容器在一排，所以我们可以使用浮动布局
2、中间的自适应，我们可以让其占一整行，然后让子元素通过margin居中来自适应
3、后面橘黄色的元素，要放在最前面，移动了是绿色元素父容器的宽度，向左平移，所以设置负值4后面蓝色的元素，要放在最后面，根据浮动贴边特性，只需要向前移动蓝色盒子的宽度即可
简化版（固比固布局)︰就是中间自适应，左右固定，所以可以并列三个元素，前面两个脱离文档流(浮动)，一左一右，设置固定宽度即可
在这里插入图片描述

<style>
    .main{
      float: left;
      height: 300px;
      width: 100%;
      background-color: #7dffe7;
    }
    /*居中自适应宽度*/
    .content{
      background-color:green;
      height: 450px;
      margin: 0 320px;
    }
    .left{
      float: left;
      background-color: orange;
      width: 300px;
      height: 400px;
      margin-left: -100%;
    }
    .right{
      float: left;
      background-color: blue;
      height: 500px;
      width: 300px;
      margin-left: -300px;
    }
  </style>
</head>
<body>
<!--中间自适应-->
<div class="main">
  <div class="content"></div>
</div>
<!--显示在左侧-->
<div class="left"></div>
<!--显示在右侧-->
<div class="right"></div>
</body>