主页 / 建站知识 /

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

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

第一种方法

<!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>

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

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

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by