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:

<meta>
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>


<p></p>
<p>第一种方法</p>

The second method:

<meta>
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>


<p></p>
<p>第二种方法</p>

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!