页面布局之经典三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

Askris

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量1.8k

点赞数 2

分类专栏：前端（HTML+CSS）文章标签： c'

本文链接：https://blog.csdn.net/Askris/article/details/80298886

版权

前端（HTML+CSS）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们在学习前端技术时，首先避免不了的就是你的页面布局问题，其中布局中比较流行的布局方式就是三栏布局，其主要要求是三列布局，中间宽度自适应，两边定宽；经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局。

实现三栏布局主要有以下几种方法：

1.float+margin

原理：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应；

<body>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
</body>

html,body{
    margin: 0;
    height: 100%;
}
.left{
    float: left;
    width: 200px;
    background: #1de;
    height: 100%;
}

.right{
    float: right;
    width: 200px;
    background: red;
    height: 100%;
}

.main{
    height: 100%;
    margin: 0 200px;
    background: #11e;
}

1.对.left,.right分别设置宽度，并对.left添加左浮动，对.right添加有浮动。
2.对.main设置外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度(也可以使用margin:0 200px;上下边距为0，左右边距为200)。

2.position+margin

原理：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

<body>
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</body>

html,body{
    margin: 0;
    height: 100%;
}

.left{
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    width: 200px;
    background: #ac1;
}

.right{
    height: 100%;
    position: absolute;
    top:0;
    right: 0;
    width: 200px;
    background: #1c1;
}

.main{
    height: 100%;
    margin: 0 200px;
    background: #12e;
}

1.对两边侧栏分别设置宽度，设置定位方式为绝对定位，设置两侧栏的top值都为0，设置左侧栏的left值为0，右侧栏的right值为0。

2.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度

3.圣杯布局(float + 负margin)

原理：主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。

<body>
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

html,body{
    margin: 0;
    height: 100%;
    padding: 0 200px 0 200px;
}
.main{
    float: left;
    height: 100%;
    width: 100%;
    background: #12e;
}

.left {
    float: left;
    width: 200px;
    height: 100%;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background-color: rgb(255, 0, 0);
}
 
.right {
    float: left;
    width: 200px;
    height: 100%;
    margin-left: -200px;
    position: relative;
    right: -200px;
    background-color: yellow;
}

1.三个部分都设置向左浮动，并设置width为100%、200px、200px；

2.设置负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度(将left的margin-left设置为-100%，此时左栏会移动到第一行的首部);

3.设置父元素的padding值给左右两个子面板留出空间。

4.设置两个子面板为相对定位，.left的left值为负的left宽度，.right的right值为负的right宽度。

4.双飞翼布局(float + 负margin)

原理：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

<body>
    <div class="main">
        <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

html,body{
    margin: 0;
    height: 100%;
    padding: 0 100px 0 100px;
}
.main {
    float: left;
    height: 100%;
    width: 100%;
    }
    .content {
    height: 100%;
    margin-left: 100px;
    margin-right: 200px;
    background-color: green;
    }
.left {
    float: left;
    height: 100%;
    width: 100px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    background-color: blue;
}

5.Flex布局

原理：用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

 .container{
      display: flex;
  }
  .left{
      background: red;
      width: 200px;
      height: 100%;
  }
  .main{
      height: 100%;
      flex: 1;
      background: yellow;
  }
  .right{
      height: 100%;
      background:blue;
      width: 200px;
  }

待续。。。

Askris

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
页面布局之经典三栏布局

我们在学习前端技术时，首先避免不了的就是你的页面布局问题，其中布局中比较流行的布局方式就是三栏布局，其主要要求是三列布局，中间宽度自适应，两边定宽；经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局。实现三栏布局主要有以下几...
复制链接

扫一扫