美文网首页
“固比固”布局——“圣杯”布局

“固比固”布局——“圣杯”布局

作者: 小姑凉喜欢无脸男 | 来源:发表于2018-08-15 19:10 被阅读118次

“固比固”布局也叫“圣杯”布局,它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应。本章用了5种方式来实现。
浮动布局,绝对定位,flex-box布局,table布局,grid布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .layout{
                margin-top: 20px;
            }
            .layout article div{
                min-height: 100px;
            }
        </style>
    </head>
    <body>
        <section class="layout float">
            <style media='screen'>
                .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-center-right">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">
                    <h1>浮动解决方案</h1>
                    1.这是三栏布局
                    2.这是三栏布局中间部分
                </div>

            </article>
        </section>

        <section class="layout absolute">
            <style>
                .layout.absolute .left-center-right>div{
                    position: absolute;
                }
                .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">
                    <h1>绝对定位解决方案</h1>
                    1.这是三栏布局绝对定位中间部分
                    2.这是三栏布局绝对定位中间部分
                </div>
                <div class="right"></div>
            </article>
        </section>

        <section class="layout flexbox">
            <style>
                .layout.flexbox{
                    margin-top: 140px;
                }
                .layout.flexbox .left-center-right{
                    display: flex;
                }
                .layout.flexbox .left{
                    width: 300px;
                    background-color: red;
                }
                .layout.flexbox .center{
                    flex: 1;
                    background-color: yellow;
                }
                .layout.flexbox .right{
                    width: 300px;
                    background-color: blue;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>flecbox解决方案</h1>
                    1.这是三栏布局flecbox间部分
                    2.这是三栏布局flecbox中间部分
                </div>
                <div class="right"></div>
            </article>
        </section>

        <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-color: red;
                }
                .layout.table .center{
                    background-color: yellow;
                }
                .layout.table .right{
                    width: 300px;
                    background-color: blue;
                }               
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>table解决方案</h1>
                    1.这是三栏布局table间部分
                    2.这是三栏布局table中间部分
                </div>
                <div class="right"></div>
            </article>
        </section>

        <section class="layout grid">
            <style>
                .layout.grid .left-center-right{
                    display: grid;
                    width: 100%;
                    grid-template-rows: 100px;
                    grid-template-columns: 300px auto 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">
                    <h1>grid解决方案</h1>
                    1.这是三栏布局grid间部分
                    2.这是三栏布局grid中间部分
                </div>
                <div class="right"></div>
            </article>
        </section>
    </body>
    
</html>

相关文章

  • “固比固”布局——“圣杯”布局

    “固比固”布局也叫“圣杯”布局,它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应。本章用了5种方式来实现...

  • CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实...

  • 圣杯布局和双飞翼布局

    相同点:都是固-弹性-固的布局方式;中间弹性布局的内容优先加载。 圣杯布局通过外层容器的padding以及内层左右...

  • 圣杯布局(传智播客)

    本教程来源 传智播客 的视频教程 效果图 圣杯布局 固比固(两侧固定宽度,中间宽度百分比自适应) 过程步骤 0 现...

  • 圣杯布局和双飞翼布局

    圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比...

  • 圣杯布局与双飞翼布局

    圣杯布局和双飞翼布局其实是一回事。 它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固...

  • CSS 经典三列布局之双飞翼布局

    双飞翼布局 双飞翼布局与圣杯布局细微区别 双飞翼布局比圣杯布局多了一个 main-inner标签 双飞翼布局不需要...

  • 布局小结

    布局方式 静态布局 浮动布局 定位布局 自适应布局 流式布局(百分比布局) 响应式布局 弹性布局 悬挂布局 圣杯布...

  • 实现三栏布局的六种方式

    六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...

  • iOS scrollView布局技巧之二 - 纯代码布局

    scrollView 纯代码布局。 - 纯代码布局分为两种情况 ------①scrollView 的子控件有着固...

网友评论

      本文标题:“固比固”布局——“圣杯”布局

      本文链接:https://www.haomeiwen.com/subject/hcxgbftx.html