• 技术文章 >web前端 >css教程

    左侧固定,右侧自适应

    高洛峰高洛峰2017-02-24 13:39:04原创667
    本文主要介绍了左侧固定,右侧自适应的两种实现方法,相信对大家学习网页布局会有很好的帮助,下面就跟小编一起来看下吧

    第一种方法:

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
    position: absolute;
    height: 200px;
    width: 300px;
    background-color: blue;
    }
    .two {
    height: 200px;
    margin-left: 300px;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <p class="one"></p>
    <p class="two">第一种方法</p>
    </body>
    </html>

    第二种方法:

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
    float:left;
    height: 200px;
    width: 300px;
    background-color: blue;
    }
    .two {
    overflow: auto;
    height: 200px;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <p class="one"></p>
    <p class="two">第二种方法</p>
    </body>
    </html>

    更多左侧固定,右侧自适应相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:固定 自适应
    上一篇:绝对定位元素的水平垂直居中的方法 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网