横向两列布局(左列固定,右列自适应)的4种CSS实现方式

转载:https://www.jb51.net/css/455079.html

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

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>  

2.方法一(推荐):使用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;   
}

3.方法二:通过设置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;   
} 

4.方法三:使用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;   
    }​ 

5.方法四:利用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;   
} 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值