css实现三栏网页布局的五种方式

　　开门见山，以下内容主要以较为常见的三栏布局（左右固定宽度，中间宽度自适应）作为模版来跟大家分享。本文分享五种较为常用的布局方式，如果有其他方式方法的欢迎评论区交流。作为一年开发的前端小白，还请各位技术大佬发现问题请指正，欢迎交流，勿骂😂。

　　浮动布局、绝对定位布局、flexbox布局、表格布局、网格布局；

1、浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .box div {
      min-height: 100px;
    }
    .box .left {
      float: left;
      width: 300px;
      background: red;
    }
    .box .right {
      float: right;
      width: 300px;
      background: blue;
    }
    .box .center {
      background: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p></div>
    <div class="center"><p>center</p></div> // 使用浮动布局时候请注意center DIV所在位置，如果该DIV写在中间样式会存在问题；
  </div>
</body>
</html>

2、绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .box div {
      min-height: 100px;
      position: absolute;
    }
    .box .left {
      left: 0;
      width: 300px;
      background: red;
    }
    .box .right {
      right: 0;
      width: 300px;
      background: blue;
    }
    .box .center {
      left: 300px;
      right: 300px;
      background: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>right</p></div>
  </div>
</body>
</html>

 3、flexbox布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flexbox布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      min-height: 100px;
    }
    .box .left {
      width: 300px;
      background: red;
    }
    .box .right {
      width: 300px;
      background: blue;
    }
    .box .center {
      flex: 1;
      background: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>right</p></div>
  </div>
</body>
</html>

 4、表格布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100%;
      display: table;
      min-height: 100px;
    }
    .box div {
      display: table-cell;
    }
    .box .left {
      width: 300px;
      background: red;
    }
    .box .right {
      width: 300px;
      background: blue;
    }
    .box .center {
      background: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>right</p></div>
  </div>
</body>
</html>

5、网格布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网格布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .box {
      width:100%;
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .box .left {
      background: red;
    }
    .box .right {
      background: blue;
    }
    .box .center {
      background: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>right</p></div>
  </div>
</body>
</html>

 以上五种布局方式都是基于网页高度固定的情况，实现左右固定中间自适应的布局。

 

posted @ 2019-07-24 16:48  孟源  阅读(1444)  评论(0)  编辑  收藏  举报