This article mainly introduces the two implementation methods of fixed left side and adaptive right side. I believe it will be very helpful for everyone to learn web page layout. Let’s take a look at it with the editor
First method:
<!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>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>Second method:
<!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>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>For more left-side fixed and right-side adaptive related articles, please pay attention to the PHP Chinese website!
The difference between Sass and less
What to do if 302 found
meta search engine
Is the higher the computer CPU frequency, the better?
What does bios mean?
What does the other party show after being blocked on WeChat?
What to do if the installation system cannot find the hard disk
Cancel WeChat campaign
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
