Three-column layout - (about fixed, adaptive intermediate, known height)

If that: a known height, to achieve three-column layout: about fixed width, an intermediate adaptation.

1 with the floating layout (float):

 <!-- 浮动布局 -->
    <section class="layout float">
       <style>
        .layout article div {
            min-height: 100px;
        }
        
        .layout.float .left {
            width: 300px;
            background: red;
            float: left;
        }
        
        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }
        
        .layout.float .center {
            background: yellow;
        }
       </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h2>浮动布局</h2>
                1, which is a three-column layout intermediate portion 2, which is a three-column layout intermediate portion 
            </ div > 
        </ Article This article was > 
    </ sectionTop >

2, using absolute positioning (absolute):

    <!-- 绝对定位布局 -->
    <section class="layout absolute">
        <style>
         .layout.absolute .left-center-right {
            position: relative;
        }
        
        .layout.absolute .left-center-right>div {
            position: absolute;
            min-height: 100px;
        }
        
        .layout.absolute .left {
            width: 300px;
            background: red;
            left: 0;
        }
        
        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        
        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right" style= "overflow: hidden; height: 100px;" > 
            < div class = "left" > </ div > 
            < div class = "Center" > 
                < H2 > absolute positioning layout </ H2 > 
                . 1, which is the middle three-column layout part 2, which is a three-column layout intermediate portion 
            </ div > 
            < div class = "right" > </ div > 
        </ Article this article was > 
    </ sectionTop >

3, using flexbox layout:

    <!-- flex布局 -->
    <section class="layout flex">
        <style>
        .layout article div {
            min-height: 100px;
        }
        .layout.flex .left-center-right {
            display: flex;
        }
        
        .layout.flex .left {
            width: 300px;
            background: red;
        }
        
        .layout.flex .center {
            width: 300px;
            background: yellow;
            flex: 1;
        }
        
        .layout.flex .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>flex布局</h2> 
                1, which is a three-column layout intermediate portion 2, which is a three-column layout intermediate portion 
            </ div > 
            < div class = "right" > </ div > 
        </ Article This article was > 
    </ sectionTop >        

4, table layout:

    <!-- table布局 -->
    <section class="layout table">
        <style>
         .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }
        
        .layout.table .left-center-right>div {
            display: table-cell;
        }
        
        .layout.table .left {
            width: 300px;
            background: red;
        }
        
        .layout.table .center {
            background: yellow;
        }
        
        .layout.table .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>table layout</ H2 > 
                . 1, three-column layout which is an intermediate portion 2, which is a three-column layout intermediate portion 
            </ div > 
            < div class = "right" > </ div > 
        </ Article This article was > 
    </ sectionTop >

5, the layout of the grid (grid):

    <!-- 网格布局 -->
    <section class="layout grid">
        <style>
         .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px;
        }
        
        .layout.grid .left {
            background: red;
        }
        
        .layout.grid .center {
            background : Yellow ; 
        } 
        
        .layout.grid .right { 
            background : Blue ; 
        } 
        </ style > 
        < Article This article was class = "Center-right-left" > 
            < div class = "left" > </ div > 
            < div class = " Center " > 
                < H2 > grid layout </ H2 > 
                . 1, which is a three-column layout intermediate portion 2, which is a three-column layout intermediate portion 
            </ div > 
            <div class="right"></div>
        </article>
    </section>

6, extension:

Layout above advantages and disadvantages:

(1), float:

　　Disadvantages: from the document flow, you need to clear the floating

　　Pros: Good compatibility

(2), absolute positioning:

　　Disadvantages: because of its own out of the document flow, leading to its child elements are out of the document flow, the use of poor

　　Advantages: relatively fast

(3), flex layout:

　　Cons: Only compatible to ie9

       Advantages: the relatively perfect solution

(4), table layout:

　　Disadvantages: multi-column layout, a column height increases, the other columns together make highly complicated operation is not friendly enough for seo

　　Pros: Good compatibility, when you need to go to be compatible when using tables for layout ie8

(5), a grid layout:

　　New technology, fewer code

If the height is not fixed, the only flex layouts and table layout directly available.