Penjajaran CSS
Jajaran Mendatar CSS
Dalam CSS, terdapat beberapa sifat untuk penjajaran mendatar unsur.
Penjajaran elemen blok
Elemen blok ialah elemen yang menduduki lebar penuh dan didahului dan diikuti oleh pemisah baris. Contoh
elemen blok:
<h1>
<p>
<div>
Dalam bab ini, kami akan memberitahu anda cara menjajarkan elemen blok secara mendatar dalam reka letak.
Penjajaran tengah, menggunakan atribut jidar
elemen blok boleh menetapkan jidar kiri dan kanan kepada "Auto " Selaraskan.
Atribut margin boleh sewenang-wenangnya dibahagikan kepada tetapan jidar kiri dan kanan dan ditentukan secara automatik Hasilnya ialah elemen berpusat:
Contoh<. ??>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強(qiáng)。</p>
</body>
</html>Petua: Jika lebarnya 100%, penjajaran tiada kesan.
Jalankan program dan cubaGunakan atribut kedudukan untuk menetapkan penjajaran kiri dan kanan
Salah satu cara untuk menjajarkan elemen Satu ialah menggunakan kedudukan mutlak: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強(qiáng)。</p>
</div>
</body>
</html>Nota: Kedudukan mutlak tiada kaitan dengan aliran dokumen, jadi ia boleh meliputi elemen lain pada halaman.
Jalankan program dan cubaGunakan atribut apungan untuk menetapkan penjajaran kiri dan kanan
Gunakan atribut float untuk menjajarkan Salah satu kaedah elemen: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會峰回路轉(zhuǎn);許多夢，看淡了，便會云開日出。學(xué)會思索，學(xué)會珍藏，微笑領(lǐng)悟，默默堅強(qiáng)。</p>
</div>
</body>
</html>Jalankan atur cara dan cuba
