div实现两列等高

最新推荐文章于 2022-08-31 07:15:56 发布

川衡

最新推荐文章于 2022-08-31 07:15:56 发布

阅读量783

点赞数

分类专栏： html5 文章标签： div实现两列等高

本文链接：https://blog.csdn.net/yanchuan1990/article/details/71742145

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>两列等高</title>
        <style type="text/css">
            html,body{width: 100%;height: 100%;}
            *{margin: 0;padding: 0;}
            .container{

            }
            .left,.right{
                width: 200px;
                background-color: #F2F0F1;
            }
            .left{
                min-height: 50px;
                position: relative;
            }
            .right{
                background-color: red;
                position: absolute;
                right: -200px;
                top: 0;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="left">
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                tttttttt<br/>
                pppppppp,<br/>
                <div class="right"></div>
            </div>
        </div>
    </body>
</html>