页面布局(三栏布局)

题目: 假设高度已知,左右宽度各位300px,中间自适应

  方案一: 浮动解决方案

    优点:浏览器兼容性比较好

    缺点:需要清除浮动(脱离了文档流)

    代码如下:

复制代码
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        float: left;
        width: 300px;
        background-color: red;
    }
    .right{
        float: right;
        width: 300px;
        background-color: green;
    }
    .center{
        min-height: 100px;
        margin: 0 300px;
        background-color: yellow;
    }
</style>
<!--浮动布局-->
<section class="layout">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <h2>float布局方案</h2>
        1.float布局 中间内容
        2.float布局 中间内容
    </div>
</section>
复制代码

  方案二: 绝对定位解决方案

 

    优点:浏览器兼容性好

 

    缺点:脱离了文档流,可使用性差

 

  代码如下:

复制代码
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        position: absolute;
        min-height: 100px;
    }
    .left{
        left: 0;
        width: 300px;
        background-color: red;
    }
    .right{
        right: 0;
        width: 300px;
        background-color: green;
    }
    .center{
       left: 300px;
        right: 300px;
        background-color: yellow;
    }
</style>
<!--绝对定位布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>绝对定位解决方案</h2>
        1.绝对定位布局 中间内容
        2.绝对定位布局 中间内容
    </div>
    <div class="right"></div>
</section>
复制代码

  方案三:flexbox解决方案(优先选择的方案)

 

    优点:css3 为了解决上面两种方案的不足出现的,移动端都用flex布局

    缺点:一些浏览器还不支持

 

  代码如下:

复制代码
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display: -webkit-flex;
        display: flex;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        -webkit-flex:1;
        flex: 1;
        background-color: yellow;
    }
</style>
<!--flexbox布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>flexbox解决方案</h2>
        1.flexbox布局 中间内容
        2.flexbox布局 中间内容
    </div>
    <div class="right"></div>
</section>
复制代码

  方案四:表格布局方案

    优点: 浏览器的兼容性比较好

     代码如下:

复制代码
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:table;
        width: 100%;
        min-height: 100px;
    }
    .layout>div{
        display: table-cell;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--表格布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>table解决方案</h2>
        1.表格布局 中间内容
        2.表格布局 中间内容
    </div>
    <div class="right"></div>
</section>
复制代码

  方案五:网格布局(grid)

    优点:网格布局是新出的属性,是一个新的技术。可以通过很简单的代码就可实现复杂的布局

    缺点:只有一些主浏览器支持

    代码如下:

复制代码
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:grid;
        grid-template-columns: 300px auto 300px;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--网格布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>网格布局解决方案</h2>
        1.网格布局 中间内容
        2.网格布局 中间内容
    </div>
    <div class="right"></div>
</section>
复制代码

这个题目中的高度是已知的,如果高度不固定,随着内容的增多而增加时。前两个方案就不可以了。后三个方案仍是可以的

posted @   yangkangkang  阅读(323)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示