zoukankan      html  css  js  c++  java
  • CSS-三列布局

    主体部分

    <div class="wrapper">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

    第一种 flex布局

    .wrapper{
                width: 100%;
                display: flex;//flex弹性布局
            }
            .left{
                background: #42B983;
                width: 33%;
                height: 100px;
            }
            .center{
                background: #7E7E7E;
                width: 33%;
                height: 100px;
            }
            .right{
                background: #FC4242;
                width: 33%;
                height: 100px;
            }

    第二种 float布局

    <style type="text/css">
            .wrapper{
                width: 100%; 
            }
            .left{
                background: #42B983;
                width: 33%;
                height: 100px;
                float: left;
            }
            .center{
                background: #7E7E7E;
                /* //中间栏不需要设置宽度,实际宽度为100% */
                /*  33%; */
                height: 100px;
            }
            .right{
                background: #FC4242;
                width: 33%;
                height: 100px;
                float: right;
            }
        </style>
    <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
            <!-- 中间栏要放在最后 -->
            <div class="center"></div>
    </div>

    第三种 position布局

    .wrapper{
                width: 100%; 
            }
            .left{
                background: #42B983;
                width: 33%;
                height: 100px;
                position: absolute;
                left: 0;
            }
            .center{
                background: #7E7E7E;
                /*  33%; */
                height: 100px;
                position: absolute;
                left: 33%;
                right: 33%;
            }
            .right{
                background: #FC4242;
                width: 33%;
                height: 100px;
                position: absolute;
                right: 0;
            }

    第四种 table布局

    .wrapper{
                width: 100%; 
                display: table;
            }
            .left{
                background: #42B983;
                width: 33%;
                height: 100px;
                display: table-cell;
            }
            .center{
                background: #7E7E7E;
                /*  33%; */
                height: 100px;
                display: table-cell;
            }
            .right{
                background: #FC4242;
                width: 33%;
                height: 100px;
                display: table-cell;
            }
  • 相关阅读:
    kubernetes的设计理念
    kubernetes整体架构
    kubernetes的起源
    云原生有未来吗?
    cloud native
    kata containers
    go特性
    开源在线分析诊断工具Arthas(阿尔萨斯)--总结
    javaAgent介绍
    oracle函数操作
  • 原文地址:https://www.cnblogs.com/liuling608/p/13909287.html
Copyright © 2011-2022 走看看