首页 / css教程

    css2实现两列三列布局的方法

    作者:PHP中文网2017-10-18 09:43:10

    php中文网赞助会员前言

    对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题。楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要用基本的 css2 中的属性布局,傻掉了。。。

    要求:两列布局,左边定宽,右边自适应

    html 布局如下


    <p id="father">
        <p id="left">我是定宽左</p>
        <p id="right">我是自适应右</p>
    </p>

    1. flex 布局


    #father{
                display: flex;
            }
            #left{
                background: red;
                height: 200px;
                width: 200px;
            }
            #right{
                background: green;
                height: 200px;
                flex:1;
            }

    2. css2 普通布局


     <style>
            #left{
                background: red;
                height: 200px;
                width: 200px;
                float:left;
            }
            #right{
                background: green;
                height: 200px;
                margin-left:200px;
            }
        </style>

     注意:

      多列布局时需要将浮动元素的 html 代码写在自适应元素的前面。如以下为三列布局的代码:


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #p1{
                width: 200px;
                height: 200px;
                background: red;
                float:left;
            }
            #p2{
                margin-left: 200px;
                margin-right:  200px;
                height: 200px;
                background: green;
            }
            #p3{
                width: 200px;
                height: 200px;
                background: red;
                float:right;
            }
        </style>
        
    </head>
    <body>
    <p id="box">
        <p id="p1">我是左定宽</p>
        <p id="p3">我是中间自适应</p>
        <p id="p2">我是右定宽</p>
    </p>
    </body>
    </html>

    效果如图:

    以上就是css2实现两列三列布局的方法的详细内容,更多请关注php中文网其它相关文章!

    标签: CSS样式表CSS2

PHP中文网

未登录