1. Float layout (note where DOM nodes are placed)

 <style>
     *{
         margin: 0;
         padding: 0;
     }

    .layout.float div{
        height: 100px;
    }

    .layout.float .left{
        float: left;
        width: 300px;
        background: red;
    }

    .layout.float .right{
        float: right;
        width: 300px;
        background: blue;
    }

    .layout.float .center{
        background: palegreen;
    }

 </style>

 
</head>
<body>

    <div class="layout float">
            <div class="left">I was left</div>
            <div class="right">I am right</div>
            <div class="center">I am a center</div>
    </div>
</body>
Copy the code
  1. Absolute layout (note relative layout when required by the parent container)
 <style>
     *{
         margin: 0;
         padding: 0;
     }

    /* .layout{ margin-bottom: 150px; } * /

    .layout.absolute {
        position: relative;
    }

    .layout.absolute div{
        height: 100px;
    }

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

    .layout.absolute .right{
        position: absolute;
        right: 0;
        width: 300px;
        background: blue;
    }

    .layout.absolute .center{
        background: palegreen;
        position: absolute;
        left: 300px;
        right: 300px;
    }

 </style>

 
</head>
<body>

    <div class="layout absolute">
            <div class="left">I was left</div>
            <div class="center">I am a center</div>
            <div class="right">I am right</div>
           
    </div>
</body>
Copy the code
  1. Flex layout
 <style>
     *{
         margin: 0;
         padding: 0;
     }

    /* .layout{ margin-bottom: 150px; } * /

    .layout.flex {
        display: flex;
    }

    .layout.flex div{
        height: 100px;
    }

    .layout.flex .left{
        width: 300px;
        background: red;
    }

    .layout.flex .right{
        width: 300px;
        background: blue;
    }

    .layout.flex .center{
        flex: 1;
        background: palegreen;
    }

 </style>

 
</head>
<body>

    <div class="layout flex">
            <div class="left">I was left</div>
            <div class="center">I am a center</div>
            <div class="right">I am right</div>
           
    </div>
</body>
Copy the code

4. The table layout


 <style>
     *{
         margin: 0;
         padding: 0;
     }

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

    .layout.table div{
        height: 100px;
        display: table-cell;

    }

    .layout.table .left{
        width: 300px;
        background: red;
    }

    .layout.table .right{
        width: 300px;
        background: blue;
    }

    .layout.table .center{
        background: palegreen;
    }

 </style>

 
</head>
<body>

    <div class="layout table">
            <div class="left">I was left</div>
            <div class="center">I am a center</div>
            <div class="right">I am right</div>
           
    </div>
</body>
</html>
Copy the code

5. Grid layout

<style>
     *{
         margin: 0;
         padding: 0;
     }

    .layout.grid{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }

    .layout.grid .left{
      
        background: red;
    }

    .layout.grid .right{
     
        background: blue;
    }

    .layout.grid .center{
        background: palegreen;
    }

 </style>

 
</head>
<body>

    <div class="layout grid">
            <div class="left">I was left</div>
            <div class="center">I am a center</div>
            <div class="right">I am right</div>
           
    </div>
</body>
Copy the code