• 欢迎访问畅享前端

CSS布局

代码分享 lc_soul 3年前 (2018-03-06) 1006次浏览 0个评论 扫描二维码

1、右边宽度固定,左边自适应

    
    
    
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
        }
        .left {
            background-color: blue;
            height: 200px;
            flex: 1;
        }
        .right {
            background-color: red;
            height: 200px;
            width: 100px;
        }
    </style>
 
 

2、两边固定中间自适应

    
    
    
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
        }
        .center {
            background-color: rebeccapurple;
            height: 200px;
            flex: 1;
        }
        .left {
            background-color: red;
            height: 200px;
            width: 100px;
        }
        .right {
            background-color: red;
            height: 200px;
            width: 100px;
        }
    </style>
 
 
 

3、水平垂直居中

第一种
#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
第二种
#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
第三种
#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
第四种 flex
#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

4、

 

5、

 

6、

 

7、

 

畅享前端 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS布局
喜欢 (3)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址