Home > Article > Web Front-end > Fixed left side, adaptive layout on the right side
This time I will bring you the layout method of fixed left side and adaptive right side. What are the precautions for the layout method of fixed left side and adaptive right side? The following is a practical case. Let’s take a look. take a look.
The 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>
The 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> I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website! Recommended reading:
Implementation of css3 visual effects
Detailed explanation of dynamically loaded css
How to use the webkit-tap-highlight-color property of CSS3
The above is the detailed content of Fixed left side, adaptive layout on the right side. For more information, please follow other related articles on the PHP Chinese website!