横向两列布局（左列固定，右列自适应）的4中实现方式

最新推荐文章于 2022-12-22 17:24:25 发布

「已注销」

最新推荐文章于 2022-12-22 17:24:25 发布

阅读量2k

点赞数 1

分类专栏： Web开发文章标签：布局 CSS

本文链接：https://blog.csdn.net/lovejulyer/article/details/51139807

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

横向两列布局：左列固定，右列自适应
需要实现的效果如下图：

这里写图片描述

HTML代码：

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试练习</title>
</head>
<body>
<div class="parent"> 
    <div class="side">侧栏</div>
    <div class="main">主栏</div>
</div>
</body>
</html>

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度
CSS代码：

        body{
            margin:0;
            padding:0;
            font-size:30px;
            font-weight:bold;    
        }
        .parent{
            text-align:center;
            line-height:200px;
        }    
        .side{
            position:absolute;left:0;top:0;
            width:200px;
            height:200px;
            background:red;
        }
        .main{
            margin-left:210px;
            background:blue;
            height:200px;
        }

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）
CSS代码：

    body{
        margin:0;
        padding:0;
        font-size:30px;
        font-weight:bold;    
    }
    .parent{
        text-align:center;
        line-height:200px;
    }
    .side{
        width:200px;
        height:200px;
        float:left;
        background:red;
    }
    .main{
        height:200px;
        margin-left:210px;
        background:blue;
    }

方法三：使用Flex布局
CSS代码：

    body{
            margin:0;
            padding:0;
            font-size:30px;
            font-weight:bold;    
        }
        .parent{
            text-align:center;
            line-height:200px;
            display:flex;
        } 
        .side{
            width:200px;
            height:200px;
            background:red;
            margin-right:10px;
        }
        .main{
            background:blue;
            height:200px;
            flex:1;
        }

方法四：利用BFC不与浮动元素重叠的特性
CSS代码：

     body{
        margin:0;
        padding:0;
        font-size:30px;
        font-weight:bold;    
    }
    .parent{
        text-align:center;
        line-height:200px;
    }
    .side {
      width: 200px;
      height: 100px;
      float: left;
      background: red;
      margin-right: 10px;
    }
    .main {
      /* 创建BFC   */
      overflow: hidden;
      background: blue;
      height: 100px;
    }