本篇文章给大家带来的内容是介绍CSS如何实现三列布局？实现三列布局的3种方法（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
三列布局指的是两边两列定宽，中间的宽度自适应。
常用三种方法：
定位
浮动
弹性盒布局
定位方式
最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位方法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
position: absolute; /* 绝对定位，使位置固定 */
left: 0;
top: 0;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px; /* 通过外边距确定宽度 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
position: absolute; /* 绝对定位，使位置固定 */
right: 0;
top: 0;
}
</style>
</head>
<body>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</body>
</html>
结果
浮动方法
让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
float: left;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px;
min-width: 100px; /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
<div>Center</div> <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>
弹性盒布局
使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
}
.center{
height: 600px;
flex: 1;
background-color: purple;
}
.right{
width: 300px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</div>
</body>
</html>Atas ialah kandungan terperinci CSS如何实现三列布局？实现三列布局的3种方法（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Dua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductApr 15, 2025 am 11:27 AMBaru -baru ini saya dapati penyelesaian untuk mengemas kini warna mana -mana imej produk. Jadi dengan hanya satu produk, kita boleh mewarnakannya dengan cara yang berbeza untuk ditunjukkan
Berita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatApr 15, 2025 am 11:19 AMPada minggu ini, Roundup, Lighthouse menyoroti cahaya pada skrip pihak ketiga, sumber yang tidak selamat akan disekat di tapak yang selamat, dan banyak kelajuan sambungan negara
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriApr 15, 2025 am 11:09 AMTerdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactApr 15, 2025 am 11:01 AMKetua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai
Apa itu Super () dalam JavaScript?Apr 15, 2025 am 10:59 AMApa yang berlaku apabila anda melihat beberapa JavaScript yang memanggil Super (). Dalam kelas kanak -kanak, anda menggunakan super () untuk memanggil pembina ibu bapa dan super. untuk mengaksesnya
Membandingkan pelbagai jenis popup JavaScript asliApr 15, 2025 am 10:48 AMJavaScript mempunyai pelbagai API popup terbina dalam yang memaparkan UI khas untuk interaksi pengguna. Terkenal:
Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Apr 15, 2025 am 10:45 AMSaya sedang berbual dengan beberapa orang depan pada hari yang lain tentang mengapa begitu banyak syarikat berjuang untuk membuat laman web yang boleh diakses. Mengapa laman web yang boleh diakses begitu sukar
Atribut `tersembunyi` kelihatan lemahApr 15, 2025 am 10:43 AMTerdapat atribut HTML yang betul -betul apa yang anda fikir harus dilakukan:
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
