css布局双飞翼布局圣杯布局flex，float

最新推荐文章于 2023-06-25 18:22:44 发布

艾小逗

最新推荐文章于 2023-06-25 18:22:44 发布

阅读量313

点赞数

分类专栏： # CSS 文章标签： html css 圣杯布局圣杯布局双飞翼布局 flex

本文为艾小逗原创文章，未经允许不可转载。转载请注明出处

本文链接：https://blog.csdn.net/qq_32442967/article/details/107084410

版权

CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

css布局双飞翼布局圣杯布局flex，float

双飞翼布局（三列布局，高度铺满，两边定宽，中间自适应）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局 （三列布局，两边定宽，中间自适应）</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    .main {
      width: 100%;
      height: 100%;
      float: left;
    }
    .main .in {
      margin: 0 110px;
      background-color: pink;
      height: 100%;
    }
    .left,
    .right {
      height: 100%;
      width: 100px;
      float: left;
      background-color: lightgreen;
    }
    .left {
      margin-left: -100%;
    }
    .right {
      margin-left: -100px;
    }
  </style>
</head>

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

</html>

三栏等高布局 (高度不定，但是等高)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏等高布局 (高度不定，但是等高)</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .list {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    .main {
      margin: 0 110px;
      background-color: lightgreen;
    }
    .left {
      width: 100px;
      float: left;
      background-color: pink;
    }
    .right {
      width: 100px;
      float: right;
      background-color: pink;
    }
    .main,
    .left,
    .right {
      margin-bottom: -9999px;
      padding-bottom: 9999px;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li class="left">左侧文字比较少</li>
    <li class="right">
      右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多
    </li>
    <li class="main">中间文字比较少</li>
  </ul>
</body>

</html>

圣杯布局flex

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局flex</title>
</head>
<style type="text/css">
  .header,
  .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
  }
  .container {
    display: flex;
  }
  .left {
    width: 200px;
    background: red;
  }
  .middle {
    flex: 1;
    background: blue;
  }
  .right {
    width: 220px;
    background: green;
  }
</style>

<body>

  <div class="header">
    header
  </div>

  <div class="container">
    <div class="left">
      <h4>left</h4>
      <p>left-content</p>
    </div>

    <div class="middle">
      <h4>middle</h4>
      <p>middle-content</p>
    </div>

    <div class="right">
      <h4>right</h4>
      <p>right-content</p>
    </div>
  </div>

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

</html>

圣杯布局float

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局float</title>
</head>
<style type="text/css">
  body {
    min-width: 550px;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .header,
  .footer {
    background: gray;
    width: 100%;
  }

  .footer {
    clear: both;
  }

  .main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
  }

  .left,
  .center,
  .right {
    float: left;
  }

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

  .left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
  }

  .right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
  }
</style>

<body>

  <div class="header">
    头部
  </div>
  <div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
  <div class="footer">
    底部
  </div>
</body>

</html>

艾小逗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局双飞翼布局圣杯布局flex，float

css布局双飞翼布局圣杯布局flex，float目录双飞翼布局（三列布局，高度铺满，两边定宽，中间自适应）三栏等高布局 (高度不定，但是等高)圣杯布局flex圣杯布局float双飞翼布局（三列布局，高度铺满，两边定宽，中间自适应）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
复制链接

扫一扫