圣杯布局(css)

最新推荐文章于 2024-06-17 00:08:19 发布

LuckySoong

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量1.2k

点赞数 2

文章标签： css

本文链接：https://blog.youkuaiyun.com/Y0admin/article/details/121001958

版权

本文详细介绍了如何实现圣杯布局，包括DOM结构的设计和CSS代码的编写。通过设置DOM结构，为左右两列预留空间，利用负外边距和定位技术，成功将中间内容置于两侧固定宽度列之间，并讨论了确保页面最小宽度的必要性，以保持布局在不同屏幕尺寸下的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局

1. DOM结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面。

2. CSS代码

假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

.container {
  height: 200px;
  padding-left:200px ;
  padding-right: 150px;
}

为左右两列预留出相应的空间，得到如下示意图：

随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

.container .column {
  float: left;
}

.center {
  width: 100%;
}

,left {
  width: 200px; 
}

.right {
  width: 150px; 
}

.footer {
  clear: both;
}

得到如下效果：

根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距（nagetive margin）：

.left {
  width: 200px; 
  margin-left: -100%;
}

得到：

随后还需要使用定位(position)方法：

.left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：

将left移动到预留位置-2接下来放置right，只需添加一条声明即可：

.right {
  width: 150px; 
  margin-right: -150px; 
}

得到最终的效果图：

至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：

body {
  min-width: 550px;
}

综上所述，圣杯布局的CSS代码为：

    body{
      min-width: 550px;
    }
    .head{
      height: 200px;
      background: tomato;
    }
    .container{
      height: 200px;
      padding-left:200px ;
      padding-right: 150px;
    }
    .container .colume{
      height: 200px;
      float: left;
    }
    .left{
      height: 200px;
      width: 200px;
      background: #eeee00;
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    .center{
      height: 200px;
      width: 100%;
      background:#000000;
    }
    .right{
      width: 150px;
      background: darkgrey;
      margin-right:-150px ;
    }
    .footer{
      clear: both;
      height: 200px;
      background: wheat;
    }