经典圣杯布局

2018-12-11 本文已影响12人前端来入坑

在页面上的显示效果就是左右两边是个固定的宽度，中间的容器自适应；即根据页面大小的变化而变化。
在开发中常用来做功能区域的划分。左边是一个导航菜单，右边是广告或者文章的列表，中间是主要的内容显示区域。

以基础代码为例,说一下第二种：
在写完这一段后

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局2</title>
<style>
*{margin:0;padding:0;}
body{background-color: #ccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{padding:0 220px 0 200px;overflow: hidden;}
.middle,.left,.right{
    min-height: 300px;
    position: relative;
}
.middle{background-color: red;width:100%;}
.left{width:200px;background-color: yellow;}
.right{width:220px;background-color: blue;}
footer{width: 100%; height: 50px;line-height:50px;background-color: #999;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
    <div class="middle">
      <h4>我是middle</h4>
      <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
    </div>
    <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
    </div>
    <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
    </div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>

效果是这样的

image.png

给这三个元素加上浮动之后：

//给这三个元素加个浮动
.middle,.left,.right{
    float: left;
}

然后效果是这样的

image.png

接下来把left移到左边的空白部分，right移到右边的空白部分就ok了

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

以下是两种方式实现的源代码，实际上也是一样的，只是写法有一点区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局1</title>
    <style>
        *{margin:0;padding:0;text-align: center;}
        body{background-color: #ccc;}
        header{width: 100%;height: 50px;line-height:50px;background-color: darkseagreen;}
        .container{overflow: hidden;padding: 0 200px;line-height:200px;}
        .middle{width: 100%;height: 300px; background-color: deeppink;float:left;}
        .left{ width: 200px;height: 300px;background-color: skyblue;float:left;margin-left: -100%;position: relative;left: -200px;}
        .right{width: 200px;height: 300px;background-color: orchid;float:left;margin-right: -100%;}
        footer{width: 100%; height: 50px;line-height:50px;background-color: slategray;}
    </style>
</head>
<body>
    <header><h4>Header内容区</h4></header>
    <div class="container">
        <div class="middle"><h4>中间弹性区</h4></div>  
        <div class="left"><h4>左边栏</h4></div>  
        <div class="right"><h4>右边栏</h4></div>
    </div>
    <footer><h4>Footer内容区</h4></footer>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局2</title>
<style>
*{margin:0;padding:0;}
body{background-color: #ccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{padding:0 220px 0 200px;overflow: hidden;}
.middle,.left,.right{
    min-height: 300px;
    float: left;
    position: relative;
}
.middle{background-color: red;width:100%;}
.left{width:200px;background-color: yellow;margin-left: -100%;left: -200px;}
.right{width:220px;background-color: blue;margin-left: -220px;right: -220px;}
footer{width: 100%; height: 50px;line-height:50px;background-color: #999;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
    <div class="middle">
      <h4>我是middle</h4>
      <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
    </div>
    <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
    </div>
    <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
    </div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>

image.png

flex布局实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局2</title>
<style>
*{margin:0;padding:0;}
body{background-color: #ccc;text-align:center;}
header{height:50px;background-color: pink;line-height:50px;}
.container{display: flex;}
.middle,.left,.right{height: 300px;}
.middle{background-color: red;flex: 1;}
.left{background-color: yellow;flex: 0 0 200px;}
.right{background-color: blue;flex: 0 0 200px;}
footer{width: 100%; height: 50px;line-height:50px;background-color: #999;}
</style>
</head>
<body>
<header>
<h2>我是header</h2>
</header>
<div class="container">
    <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
    </div>
    <div class="middle">
      <h4>我是middle</h4>
      <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
    </div>
    <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
    </div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>

image.png

对flex布局不了解的小伙伴参考https://www.jianshu.com/p/82e923f7997a

经典圣杯布局

猜你喜欢

热点阅读