两栏自适应布局三种简单的实现方式

最新推荐文章于 2023-11-05 23:45:24 发布

追逐梦想之路_随笔

最新推荐文章于 2023-11-05 23:45:24 发布

阅读量681

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/qq_44472790/article/details/90111015

版权

CSS/CSS3 专栏收录该内容

13 篇文章 1 订阅

订阅专栏



1.使用float+margin-left
    <style>
        *{
            margin:0;padding: 0
        }
        html,body{
            height: 100%;
        }
        .item1{
            height:100%;
            width: 300px;
            float: left;
            background: red;
        }
        .item2{
            height:100%;
            margin-left: 300px;
            background: green;
        }
        
    </style>
</head>
<body>
    
        <div class="item1"></div>
        <div class="item2"></div>

</body>
</html>

2.弹性合布局 diplay:flex
<style>
        *{
           margin:0;padding: 0;
        }
        html,body{
            height: 100%;
            
        }
        .box{
            height: 100%;
            display: flex;
        }
        .item1{
            height:100%;
            width: 300px;
            background: red;
        }
        .item2{
            height:100%;
            flex:1;
            background: green;
        }
        
    </style>

    <body>
       <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        </div>
    </body>

3.使用position定位布局 
<style>
        *{
           margin:0;padding: 0;
        }
        html,body{
            height: 100%;
            
        }
        .box{
            height: 100%;
            
        }
        .item1{
            height:100%;
            width: 300px;
            position: absolute;
            top:0;
            left:0;
            background: red;
        }
        .item2{
            height:100%;
            margin-left: 300px;
            background: green;
        }
        
    </style>
</head>
<body>
       <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        </div>

</body>

追逐梦想之路_随笔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
两栏自适应布局三种简单的实现方式

1.使用float+margin-left <style> *{ margin:0;padding: 0 } html,body{ height: 100%; } .item1{ height:100%; ...
复制链接

扫一扫