CSS布局2：两列布局，左侧固定，右侧自适应

最新推荐文章于 2024-10-14 09:08:48 发布

weixin_34302798

最新推荐文章于 2024-10-14 09:08:48 发布

阅读量140

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/4045971/blog/3025767

版权

2019独角兽企业重金招聘Python工程师标准>>>

解决方法1：浮动；给左边的元素加浮动，给右边的元素设置margin-left=左边元素的宽度；不能用display:inline-block;宽度是由内容撑开的，脱离文档流的元素宽度也是由内容撑开的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两列布局</title>
<style>
*{
margin: 0;
padding: 0;

}
.left{
width: 100px;
height: 200px;
background-color: #c0c0c0;
float: left;
}
.right{
height: 400px;
background-color: #8080ff;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>

</html>

解决方法2：绝对定位；给左边的元素加定位，给右边的元素设置margin-left=左边元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #c0c0c0;
           position: absolute;
        }
        .right{
            height: 400px;
            background-color: #8080ff;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

解决方法3：固定定位；给左边的元素加定位，给右边的元素设置margin-left=左边元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #c0c0c0;
            position:fixed;
        }
        .right{
            height: 400px;
            background-color: #8080ff;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

解决方法4：给右边的元素加margin-top值和margin-left值 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #c0c0c0;     
        }
        .right{
            height: 400px;
            background-color: #8080ff;
            margin-left:100px;
            margin-top:-200px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    
</body>
</html>

解决方法5：弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
          display: flex;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #c0c0c0;
        }
        .right{
            height: 400px;
            background-color: #8080ff;
           flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

转载于:https://my.oschina.net/u/4045971/blog/3025767