简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

左侧固定，右侧自适应

高洛峰
Lepaskan： 2017-02-24 13:39:04
asal
1131 orang telah melayarinya

本文主要介绍了左侧固定，右侧自适应的两种实现方法，相信对大家学习网页布局会有很好的帮助，下面就跟小编一起来看下吧

第一种方法：

<!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>
Salin selepas log masuk

第二种方法：

<!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>
Salin selepas log masuk

更多左侧固定，右侧自适应相关文章请关注PHP中文网！

Label berkaitan：
固定 自适应
sumber：php.cn
Artikel sebelumnya：绝对定位元素的水平垂直居中的方法 Artikel seterusnya：CSS3实现扇形动画菜单实例
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Laravel 8 - Cara mengubah hala /{editable_text} laluan ke /{user} route Saya telah cuba membuat laluan ubah hala untuk membawa saya ke profil pengguna. Laluan uba...
daripada 2024-04-06 17:26:11
0
1
410
Melepaskan paksi X selepas memanggil Chart.zoom(): panduan langkah demi langkah Saya menetapkan strategi tatal kepada setScrollStrategy(AxisScrollStrategies.progressive) ...
daripada 2024-04-04 23:40:56
0
1
1339
Bagaimana untuk menggunakan fail "css" dan "js" tersuai dengan berkesan kepada semua pentadbir dalam aplikasi? Saya mempunyai fail css dan js tersuai, admin.py dan overridden base.html terletak dalam t...
daripada 2024-04-03 20:54:06
0
1
400
Kelas baris CSS menjadikan elemen tertentu terkeluar daripada bingkai, manakala ia harus statik dan ditetapkan pada bahagian bawah paparan Halaman saya pada masa ini kelihatan seperti ini. Selepas menambah kelas baris supaya kedu...
daripada 2024-04-03 18:48:12
0
1
281
Sambungan pad tersuai dengan ikon sambungan selepas tajuk Saya cuba mencipta akordion tikar dengan panel pengembangan tikar di dalam gelung untuk. M...
daripada 2024-04-02 12:39:50
0
1
381
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！