一面/二面（1）之CSS实现三栏布局(5种)

最新推荐文章于 2023-06-23 19:33:50 发布

weixin_30980795

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量179

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_30980795/article/details/107104061

版权

常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局
1、float布局:脱离文档流，但是不脱离文本流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动实现三栏布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
		    float: left;
		    width: 300px;
		    height: 100px;
		    background: #631D9F;
		}
		.right{
		    float: right;
		    width: 300px;
		    height: 100px;
		    background: red;
		}
		.center{
		    margin-left: 300px;
		    margin-right: 300px;
		    background-color: #4990E2;
		}
    </style>
</head>
<body>
    <article class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中
            <h2>浮动布局</h2>
        </div>    
    </article>
</body>
</html>

2、Position布局:我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。

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

<head>
  <meta charset="UTF-8">
  <title>浮动实现三栏布局</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      position: relative;
    }

    .left {
      position: absolute;
      left: 0;
      width: 300px;
      background-color: red;
    }

    .center {
      position: absolute;
      left: 300px;
      right: 300px;
      background-color: blue;
    }

    .right {
      position: absolute;
      right: 0;
      width: 300px;
      background-color: #3A2CAC;
    }
  </style>
</head>

<body>
  <article class="main">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中
      <h2>浮动布局</h2>
    </div>
  </article>
</body>

</html>

3、table布局:

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

<head>
  <meta charset="UTF-8">
  <title>浮动实现三栏布局</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      width: 100%;
      display: table;
    }

    .left,
    .center,
    .right {
      display: table-cell;
    }

    .left {
      width: 300px;
      background-color: red;
    }

    .center {
      background-color: blue;
    }

    .right {
      width: 300px;
      background-color: red;
    }
  </style>
</head>

<body>
  <article class="main">
    <div class="left">左</div>
    <div class="center">中
      <h2>浮动布局</h2>
    </div>
    <div class="right">右</div>

  </article>
</body>

</html>

4、弹性(flex)布局:

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

<head>
  <meta charset="UTF-8">
  <title>浮动实现三栏布局</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      display: flex;
    }

    .left {
      width: 400px;
      background-color: red;
    }

    .center {
      background-color: blue;
      flex-grow: 1
    }

    .right {
      background-color: red;
      width: 400px;
    }
  </style>
</head>

<body>
  <article class="main">
    <div class="left">左</div>
    <div class="center">中
      <h2>浮动布局</h2>
    </div>
    <div class="right">右</div>

  </article>
</body>

</html>

5、网格(gird)布局:gird-template-columns设置列的宽度，grid-template-rows设置列的高度

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

<head>
  <meta charset="UTF-8">
  <title>浮动实现三栏布局</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .left {
      background-color: red;
    }

    .center {
      background-color: blue;
    }

    .right {
      background-color: red;
    }

    .main {
      width: 100%;
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
  </style>
</head>

<body>
  <article class="main">
    <div class="left">左</div>
    <div class="center">中
      <h2>浮动布局</h2>
    </div>
    <div class="right">右</div>

  </article>
</body>

</html>