前端面试--三栏布局--双飞翼布局和圣杯布局

最新推荐文章于 2022-11-30 14:53:35 发布

有头发的光头强

最新推荐文章于 2022-11-30 14:53:35 发布

阅读量290

点赞数 1

本文链接：https://blog.csdn.net/CS13477062349/article/details/88865915

版权

1.为了优先显示中间部分，都是先写中间部分main，再写左右 left,right

2.双飞翼布局中间多了一个标签包裹，缺点：dom结构冗余

3.圣杯模式：当中间区域宽度<左侧宽度时，布局会发生混乱

个人比较喜欢圣杯模式和min-width混合使用，这样可避免布局混乱。

双飞翼布局如下：

<style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
    <body>
        <div class="main"><div class="main-inner">中心区</div></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>

圣杯布局如下：

<style type="text/css">
      /*基本样式*/
      .left, .right, .main {
        min-height: 300px;
      }
      .left {
        width: 200px;
        background-color:thistle;
      }
      .main {
        background-color: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 圣杯布局关键代码 */
      .left, .main, .right {
        float: left;
        position: relative;
      }
      .main {
        width: 100%;
      }
      .container {
        padding-left: 200px;
        padding-right: 300px;
      }
      .left {
        margin-left: -100%;
        left: -200px;
      }
      .right {
        margin-left: -300px;
        right: -300px;
      }
    </style>
    <body>
        <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
        </div>
    </body>

有头发的光头强

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试--三栏布局--双飞翼布局和圣杯布局

1.为了优先显示中间部分，都是先写中间部分main，再写左右 left,right2.双飞翼布局中间多了一个标签包裹，缺点：dom结构冗余3.圣杯模式：当中间区域宽度<左侧宽度时，布局会发生混乱个人比较喜欢圣杯模式和min-width混合使用，这样可避免布局混乱。双飞翼布局如下：<style> .left, .rig...
复制链接

扫一扫