CSS三栏布局之圣杯布局详解

最新推荐文章于 2023-08-01 18:50:37 发布

一生ea

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量462

点赞数

分类专栏： HTML&&CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_39006917/article/details/105192873

版权

HTML&&CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

三栏布局：两边定宽，中间宽度随窗口大小的改变而改变的布局方式。

正文

圣杯布局：

主要利用负外边距和相对定位实现。负外边距在另一篇博文中介绍https://blog.csdn.net/weixin_39006917/article/details/105193451

接下来详细介绍圣杯布局的设计

1.HTML中添加三个div元素

<body> 
    <div class="main">中</div>
    <div class="left">左栏</div>
    <div class="right">右栏</div>
 </body>

2.为元素添加CSS

 body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
 body{
     padding-left:100px;/*左内边距*/
     padding-right:200px;/*右内边距*/
   }
 .left{
     background: coral;
     width:100px;/*对应body的padding-left值*/
     height:100%;
     float: left;
  }
  .main{
     background: lightblue;
     width:100%;
     height:100%;
     float: left;
}
 .right{
     background: gray;
     width:200px;/*对应body的padding-right值*/
     height:100%;
     float: left;
}

从.left、.main、.right三个样式代码中看到，每个都加入了float:left，上述CSS还不能实现最终的三栏布局。

两边的空白为.body设置的左右内边距。由于.main的宽度width:100%，使得后面两个div被“挤”到了下方。

3.将左栏移动到窗口最左侧

.left{
     background: coral;
     width:100px;
     height:100%;
     float: left;
     margin-left:-100%;/*向浮动方向移动，直到到达其父元素body内容的最左侧*/
}

在前面CSS的基础上加入语句margin-left: -100%，意味着将该元素朝着浮动方向（左）移动，直到到达其父元素body内容的最左侧。效果图：

此图没有包含右栏的效果，仅讨论左栏。可以看到左栏成功移动到body内容的最左侧，并覆盖了一部分中栏。接下来，加入相对定位，使左栏移动到中栏的左侧，即窗口的最左侧，覆盖body元素的padding-left。

.left{
     background: coral;
     width:100px;
     height:100%;
     float: left;
     margin-left:-100%;
     position: relative;/*相对定位*/
     left:-100px;/*将左栏相对于原位置向左移动100px*/ 
   }

相对定位中的left：30px可以理解为：移动后的元素与其移动前的空间左侧相距30px，也就是将元素向右移动30px。若left属性值为-30px，则可以理解为向左移动，与right: 30px等效果。

4.将右栏移动到窗口最右侧

.right的设计同.left，最终CSS样式代码如下

.right{
     background: gray;
     width:200px;
     height:100%;
     float: left;
     margin-left:-200px;/*向浮动方向移动200px*/
     position: relative;
     right:-200px;/*向右移动到窗口最右侧*/
   }

这里的margin-left：-200px会使右栏在body内容区内向左侧移动200px,移动后右侧仍然会有body设置的200px右内边距的空白。再用相对定位，使右栏最终移动到窗口最右侧。

最终效果：