传统双飞翼三列布局

最新推荐文章于 2021-08-03 21:38:37 发布

Charlotte1018

最新推荐文章于 2021-08-03 21:38:37 发布

阅读量230

点赞数

分类专栏： HTML／CSS

本文链接：https://blog.csdn.net/Charlotte1018/article/details/82709377

版权

HTML／CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. 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>Flex布局</title>
    <style>
     *{
        padding: 0;
        margin: 0;
      }
    .container {
        width: 100vw;
        display: flex;
     }
    .left {
        width: 200px;
        background: red;
        height: 100vh;
     }

     .right {
        width: 200px;
        background: yellow;
        height: 100vh;
     }
     .mid {
        height: 100 vh;
        flex: 1;
        background: blue;
     }
     </style>
</head>
<body>
    <div class = "container">
        <div class = "left">left</div>
        <div class = "mid">mid</div>
        <div class = "right">right</div>
    </div>
</body>
</html>

二. 伪元素布局

<!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>
     *{
        padding: 0;
        margin: 0;
      }
    .container {
        width: 100vw;
     }
     .mid {
        height: 100vh;
        background: blue;
     }
    .mid::before{
        content: "left";
        width:200px;
        background: red;
        height: 100vh;
        display: inline-block;
        position: absolute;
        left:0;
    }
    .mid::after{
        content: "right";
        width:200px;
        background: yellow;
        height: 100vh;
        display: inline-block;
        position: absolute;
        right:0;
        }
     </style>
</head>
<body>
    <div class = "container">
        <div class = "mid">mid</div>
    </div>
</body>
</html>

三. 浮动布局

<!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>
     *{
        padding: 0;
        margin: 0;
      }
    .container {
        width: 100vw;
     }
    .left {
        width: 200px;
        float: left;
        background: red;
        height: 100vh;
     }

     .right {
        width: 200px;
        float: right;
        background: yellow;
        height: 100vh;
     }
     .mid {
        height: 100vh;
        background: blue;
     }
     </style>
</head>
<body>
    <div>
        <div class = "left">left</div>
        <div class = "right">right</div>
        <div class = "mid">mid</div>
    </div>
</body>
</html>

四.绝对定位布局

<!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>
     *{
        padding: 0;
        margin: 0;
      }
    .container {
        width: 100vw;
     }
    .left {
        width: 200px;
        background: red;
        height: 100vh;
        position: absolute;
        left:0;
     }

     .right {
        width: 200px;
        background: yellow;
        height: 100vh;
        position: absolute;
        right:0;
     }
     .mid {
        height: 100vh;
        position:relative;
        margin: 0 200px;
        background: blue;
     }
     </style>
</head>
<body>
    <div>
        <div class = "left">left</div>
        <div class = "right">right</div>
        <div class = "mid">mid</div>
    </div>
</body>
</html>