How to implement three-column layout in css-CSS Tutorial-php.cn

How to implement three-column layout in css

王林

Release： 2020-04-21 09:12:35

forward

3059 people have browsed it

How to implement three-column layout in css

Implementation method:

1. Float floating

<section class=&#39;layout float&#39;>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

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

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中间的自适应元素--浮动</div>
         </article>
     </section>

Copy after login

Principle: The left and right divs are separated from the document flow due to floating, and the center will move up , resulting in the effect of a three-column layout (provided that the heights are the same)

Advantages: High compatibility

Disadvantages: Need to clear floats to prevent affecting other elements

If the height is not fixed , the content in the middle will be stretched, and the left and right sides will not be stretched together

(Recommended tutorial: CSS tutorial)

2. Absolute positioning

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

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

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--绝对定位
            </div>
            <div class="right"></div>
         </article>
     </section>

Copy after login

Principle: Use absolute positioning and width to fix the divs on the left and right sides, and the width of the middle div will have an adaptive effect

Advantages: Quick

Disadvantages: If the parent element is detached Without the document flow, the child elements will definitely break away from the document flow, and there are not many application scenarios

If the height of the middle element increases, the height of the elements on both sides will not increase, so only the middle div will be stretched

3. Flex layout

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

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

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--flex布局
            </div>
            <div class="right"></div>
         </article>
     </section>

Copy after login

Principle: Set the parent element to flex layout, and then set flex to 1 for the middle element to achieve an adaptive effect

Advantages: Commonly used in actual development

Disadvantages: IE8 and below browsers do not support

If the height is not fixed, after the height of the middle content is expanded, both sides will also be expanded accordingly

4. table Layout

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

Copy after login

Principle: Set the parent element to table layout, and then each child element is teble-cell. Set a fixed width to the left and right grids, and the middle grid can achieve an adaptive effect

Advantages: Good compatibility, can be used as a replacement for flex layout below IE8

Disadvantages: Limitations

If the height is not fixed, when the middle is stretched, the left and right sides will also It is stretched, similar to flex

5. Grid layout

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右两格都是300px，中间是自适应*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--grid布局
            </div>
            <div class="right"></div>
        </article>
    </section>

Copy after login

Principle: Set the parent element to grid layout, and then specify the height and width of each grid, just use Just set the color for each cell separately

Advantages: The technology is relatively new and convenient

Disadvantages: The compatibility is not very good

If the height is not fixed, add text to the middle element , and it will not open

Related video tutorial recommendations: css video tutorial

The above is the detailed content of How to implement three-column layout in css. For more information, please follow other related articles on the PHP Chinese website!