左侧固定，右侧自适应（两种方法任选）

时间：2017-04-09

第一种方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">第一种方法</div>
</body>
</html>

第二种方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">第二种方法</div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇：绝对定位元素的水平垂直居中的方法（3种任选） 下一篇：解析width:100%;与width:auto;的区别

左侧固定，右侧自适应（两种方法任选）

相关文章

最新文章