圣杯布局和双飞翼布局

最新推荐文章于 2024-04-16 10:42:49 发布

DLGDark

最新推荐文章于 2024-04-16 10:42:49 发布

阅读量561

点赞数

分类专栏： css 文章标签：圣杯布局双飞翼布局 flex布局三列布局

本文链接：https://blog.csdn.net/DLGDark/article/details/90902393

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一. 圣杯布局

首先中间部分宽度肯定设置100%自适应，即width: 100%;左右两个元素都固定宽度，将三个元素都设置浮动，即float: left;
因为之前main元素设置了宽度100%，且浮动，所以占据了第一行整行，下面需要将left元素放到左边，right元素放到右边；则需要分别设置负值margin-left,给left元素设置 margin-left: -100%；（相当于往左移动一整行的距离），设置right元素 margin-left: -200px; （往左移动自身宽度大小的距离）,此时left和right两个元素就已经放在左右两个位置。
此时需要摆正中间元素，则需要给三个元素的父元素设置padding，左右 padding大小为left和right元素的宽度。
第三步设置完成后，需要分别给left元素设置相对定位 position: relative; 并设置 left： -200px; 给right 元素设置 position:relative; right: -200px; 目的是将left和right元素相对于自身原来的位置分别往左和往右移到自己正确的位置上去。
此时已经基本完成圣杯布局，但有一个缺陷，那就是中间内容过多时，页面宽度过小时，布局会错乱，此时需要给body一个最小宽度，这个值是多少了？不是随便给的，值的大小为left的宽度*2加上right的宽度。（回想之前left使用了position: relative，所以就意味着在main开始的区域，还存在着一个left的宽度，故min-width = leftWidth + rightWidth + leftWidth）

代码如下所示：

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>圣杯布局</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        min-width: 600px;
      }
      .bd{
        padding: 0 200px;
      }
      .main{
        width: 100%;
        background-color: aqua;
        height: 200px;
      }
      .left{
        width: 200px;
        margin-left: -100%;
        position: relative;
        left: -200px;
        background-color: blue;
        height: 200px;
      }
      .right{
        width: 200px;
        margin-left: -200px;
        position: relative;
        right: -200px;
        background-color: blueviolet;
        height: 200px;
      }
      .fl{
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="bd">
       <div class="main fl">
         main mainmainmainmainmainmainmainmainmainmain
       </div>
       <div class="left fl">
         left
       </div>
       <div class="right fl">
         right
       </div>
    </div>
  </body>
</html>

二. 双飞翼布局

双飞翼布局和上面的圣杯布局基本上一样，稍微有点不一样，就是将中心区域外面包了一层父元素，父元素与left和right元素同级，前面宽度及浮动设置没变，唯一的区别就是不用padding和相对定位了，而是在main的内部main-content元素设置一个margin值，左右margin值大小就是left和right的宽度大小，而且不存在上面的缺陷问题，

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>双飞翼布局</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .main-content{
        margin: 0 200px;
      }
      .main{
        width: 100%;
        background-color: aqua;
        height: 200px;
      }
      .left{
        width: 200px;
        margin-left: -100%;
        background-color: blue;
        height: 200px;
      }
      .right{
        width: 200px;
        margin-left: -200px;
        background-color: blueviolet;
        height: 200px;
      }
      .fl{
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="bd">
       <div class="main fl">
        <div class="main-content">
          main  main  main  main  main  main  main  main  main
        </div>
       </div>
       <div class="left fl">
         left
       </div>
       <div class="right fl">
         right
       </div>
    </div>
  </body>
</html>

拓展：使用flex也可以实现以上三列布局，而且比上面的都简单，代码如下：

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>flex布局</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .bd{
        display: flex;
      }
      .main{
        flex: 1;
        background-color: aqua;
        height: 200px;
      }
      .left{
        order: -1;
        flex-basis: 200px;
        background-color: blue;
        height: 200px;
      }
      .right{
        flex-basis: 200px;
        background-color: blueviolet;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="bd">
       <div class="main">
         mainmainmainmainmainmainmainmainmainmain
       </div>
       <div class="left">
         left
       </div>
       <div class="right">
         right
       </div>
    </div>
  </body>
</html>

DLGDark

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局和双飞翼布局

一. 圣杯布局首先中间部分宽度肯定设置100%自适应，即width: 100%;左右两个元素都固定宽度，将三个元素都设置浮动，即float: left;因为之前main元素设置了宽度100%，且浮动，所以占据了第一行整行，下面需要将left元素放到左边，right元素放到右边；则需要分别设置负值margin-left,给left元素设置 margin-left: -100%；（相当于往左移动...
复制链接

扫一扫