没有比这更清楚的双飞翼布局了

文章目录

    • 什么是双飞翼布局
    • 双飞翼布局的特点
    • 怎么实现双飞翼布局
    • 完整代码展示
    • 双飞翼布局与圣杯布局的不同
    • 圣杯布局参考
    • 原创不易,点个赞再走吧。您的支持是对小白的巨大的鼓励

什么是双飞翼布局

圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局

双飞翼布局的特点

  1. 中间部分在DOM结构上优先,以便先行渲染
  2. 允许三列中的任意一列成为最高列(三列高度不一样并且可以以任一列的高度为最高)
  3. 只需要使用一个格外的
    标签(相对于圣杯布局),给main里面添加一个内容标签content

怎么实现双飞翼布局

  1. 写下HTML代码(相对于圣杯布局使用一个格外的
    标签)
<body>
    <div class="container">
        <div class="main">
            <div class="content">中间</div></div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
  1. 使三栏都处于左浮状态,并且使中间栏的宽度成父容器的100%
  .container {
        min-width: 400px;
        height: 200px;
        background-color: red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left; 
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:greenyellow;
       
   }

没有比这更清楚的双飞翼布局了_第1张图片

  1. 为中间栏中的content设置左右padding的值,使其以后为侧边栏定位空出位置,padding的值为侧边栏的宽
   .content {
   /*预留出位置给左右栏*/
       margin-left: 200px;
       margin-right: 150px;
   }

没有比这更清楚的双飞翼布局了_第2张图片
4. 为两侧侧边栏加上负margin,用以调整位置。其中左边栏设为margin-left:-100%,而右边栏的margin-left则为负的其自身宽度(利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理)

   .left {
        margin-left: -100%;
   }
   .right {
        margin-left: -150px;
   }

没有比这更清楚的双飞翼布局了_第3张图片

完整代码展示

<style>
    body {
        margin: 0;
        padding: 0;
   } 
   .container {
        min-width: 400px;
        height: 200px;
        background-color: red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left; 
        margin-left: -100%;
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
        margin-left: -150px;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:greenyellow;
       
   }
   .content {
       margin-left: 200px;
       margin-right: 150px;
   }
</style>
<body>
    <div class="container">
        <div class="main">
            <div class="content">中间</div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

双飞翼布局与圣杯布局的不同

双飞翼布局优点是更好的解决圣杯布局的错乱问题 ,缺点是增加了一个标签
若圣杯布局的设置了最小宽度(看以上代码container),则当屏幕小于这个最小宽度时会出现滚动条,而双飞翼布局则则是三栏响应式布局(以下分别为圣杯布局和双飞翼布局)
没有比这更清楚的双飞翼布局了_第4张图片
没有比这更清楚的双飞翼布局了_第5张图片

圣杯布局参考

圣杯布局参考我的另一篇博客
圣杯布局

原创不易,点个赞再走吧。您的支持是对小白的巨大的鼓励

你可能感兴趣的:(CSS)