您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 和 HTML 圣杯布局 + 双飞翼布局

时间：12-14来源：作者：点击数：

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：圣杯布局，为了中间 div 内容不被遮挡，将中间 div 设置了左右 padding-left 和 padding-right 后，将左右两个 div 用相对布局 position: relative 并分别配合 right 和 left 属性，以便左右两栏 div 移动后不遮挡中间 div。双飞翼布局，为了中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该子 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。

1、圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      padding: 0 200px 0 160px;
      height: 500px;
    }
    .left {
      float: left;
      position: relative;
      width: 160px;
      right: 160px;
      height: 400px;
      background-color: aqua;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: 200px;
      height: 400px;
      margin-right: -200px;
      background-color: cornsilk;
    }
    .middle {
      float: left;
      width: 100%;
      height: 400px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

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

  <div class="footer">footer</div>
</body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双飞翼布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      height: 500px;
    }
    .container {
      float: left;
      width: 100%;
    }
    .left {
      float: left;
      width: 160px;
      height: 400px;
      background-color: aqua;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: 200px;
      height: 400px;
      margin-left: -200px;
      background-color: cornsilk;
    }
    .middle {
      height: 400px;
      background-color: blueviolet;
      margin: 0 200px 0 160px;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

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

  <div class="footer">footer</div>

</body>
</html>

3、圣杯布局 flex 版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    .header, .footer {
      width: 100%;
      height: 100px;
      color: #fff;
      text-align: center;
      background-color: burlywood;
    }

    .main {
      display: flex;
      height: 500px;
    }
    .left {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 160px;
      height: 400px;
      background-color: aqua;
    }
    .right {
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 200px;
      height: 400px;
      background-color: cornsilk;
    }
    .middle {
      flex-grow: 1;
      height: 400px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="header">header</div>

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

  <div class="footer">footer</div>
</body>
</html>

4、粘连布局

布局要求：

有一块内容 <main> ，当 <main> 的高康足够长的时候，紧跟在 <main> 后面的元素 <footer> 会跟在 <main> 元素的后面。
当 <main> 元素比较短的时候（比如小于屏幕的高度),我们期望这个 <footer> 元素能够“粘连”在屏幕的底部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body, html {
      height: 100%;
    }
    #wraper {
      min-height: 100%;
      background-color: pink;
      text-align: center;
      overflow: hidden;
    }
    #wraper .main {
      padding-bottom: 50px;
    }
    #footer {
      height: 50px;
      background-color: greenyellow;
      text-align: center;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  
  <div>
    <div class="main">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora tempore, id placeat cupiditate doloribus temporibus consectetur mollitia magnam ipsa quae ut nisi, eos voluptates repudiandae, eius sint nobis. Molestiae, ipsa!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores facilis corrupti iure. Praesentium ab, eius dolorem quibusdam ex adipisci optio reprehenderit beatae, natus consequatur, nam in incidunt aliquam architecto?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, eligendi. Nulla, in! Dignissimos culpa aliquid eaque cumque ea doloribus quaerat recusandae iure, vero maxime nobis harum deserunt architecto? Aliquam, ipsa?
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia enim explicabo optio eveniet inventore eos laudantium quas, at quo recusandae! Perferendis tempora, porro ipsa corporis laboriosam accusantium placeat ad itaque.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsum et numquam praesentium rerum beatae repellat, exercitationem veniam in. Ducimus molestiae cumque fugiat repudiandae possimus natus quos laudantium pariatur minus?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam reiciendis iste nulla porro quidem ducimus illum blanditiis aspernatur, officiis minima error, tenetur id reprehenderit ad possimus voluptate odio veritatis ipsam.
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut veritatis aperiam dolores, ipsam suscipit molestias eaque doloribus voluptates modi, labore sapiente vel dolorem iure esse doloremque error voluptatum itaque praesentium.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem officiis ipsam non odio pariatur libero necessitatibus aut fugiat inventore, beatae dolore mollitia porro saepe nesciunt incidunt earum voluptatibus et adipisci.
    </div>
  </div>
  <div></div>
</body>
</html>

5、两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>两列自适应布局</title>
  <style>
    /* 浮动版 */
    /* .parent {
      overflow: hidden;
      zoom: 1;
    }
    .left {
      float: left;
      margin-right: 20px;
    }
    .right {
      overflow: hidden;
      zoom: 1;
    } */

    /* flex 版 */
    .parent {
      display: flex;
    }
    .left {
      flex: 0;
    }
    .right {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right" >
      <p>right</p>
      <p>right</p>
    </div>        
  </div>
</body>
</html>

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号