这次给大家带来左侧固定，右侧自适应的布局方式，左侧固定，右侧自适应布局方式的注意事项有哪些，下面就是实战案例，一起来看一下。
第一种方法：
<!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>第二种方法：
<!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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
CSS3的webkit-tap-highlight-color属性如何使用
Atas ialah kandungan terperinci 左侧固定，右侧自适应的布局方式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pengenalan kepada ciri-ciri ruang maya
Penggunaan pulangan nilai pulangan Python
Cara menggunakan mata wang digital
Apakah yang perlu saya lakukan jika huruf Inggeris muncul apabila komputer dihidupkan dan komputer tidak boleh dihidupkan?
Perbezaan antara vue2.0 dan 3.0
Cara menukar bandar di Douyin
tiada penyelesaian fail sedemikian
Bagaimana untuk mengkonfigurasi gerbang lalai
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
