Jajaran Mendatar CSS
Penjajaran mendatar CSS (Penjajaran Mendatar)
Penjajaran elemen blok
Elemen blok ialah elemen yang menduduki lebar penuh, dengan pemisah baris sebelum dan selepas. Contoh
elemen blok:
<h1>
<p>
<div>
Dalam This In bab ini, kami akan menunjukkan kepada anda cara menjajarkan elemen blok secara mendatar dalam reka letak.
Penjajaran tengah, gunakan atribut jidar
elemen blok untuk menetapkan jidar kiri dan kanan kepada penjajaran "automatik".
Nota: Menggunakan atribut margin:auto dalam IE8 tidak akan berfungsi dengan betul melainkan anda mengisytiharkan !DOCTYPE
atribut margin boleh sewenang-wenangnya dibahagikan kepada tetapan jidar kiri dan kanan untuk menentukan keputusan A secara automatik elemen berpusat muncul:
contoh
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}Petua: Jika lebar ialah 100%, penjajaran tidak mempunyai kesan.
Nota: Terdapat pepijat pemprosesan margin dalam elemen blok dalam IE5. Agar contoh di atas berfungsi dalam IE5, beberapa kod tambahan perlu ditambah.
Isu Keserasian Pelayar Silang
<pApabila menjajarkan elemen seperti ini, adalah idea yang baik untuk menentukan terlebih dahulu jidar dan pelapik elemen. Ini adalah untuk mengelakkan perbezaan visual dalam pelayar yang berbeza.
IE8 dan lebih awal mempunyai masalah apabila menggunakan atribut kedudukan. Jika elemen kontena (dalam kes ini <div class="container">) mempunyai lebar yang ditentukan dan pengisytiharan !DOCTYPE tiada, IE8 dan versi terdahulu akan menambah margin 17px ke kanan. Ini nampaknya ruang simpanan yang menatal. Apabila menggunakan atribut kedudukan, sentiasa tetapkannya dalam pengisytiharan DOCTYPE!
Gunakan atribut apungan untuk menetapkan penjajaran kiri dan kanan
Menggunakan atribut apungan ialah salah satu cara untuk menjajarkan elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到達了的地方，都屬于昨天。哪怕那山再青，那水再秀，那風再溫柔。帶深的流連便成了一種羈絆，絆住的不僅是雙腳，還有未來。</p>
<p>怎麼能不喜歡出發(fā)呢？沒見過大山的巍峨，真是遺憾；見了大山的巍峨沒見過大海的浩翰，仍然是遺憾；
見了大海的浩翰沒見過大漠的廣袤，依舊遺憾；見了大漠的廣袤沒見過森林的神秘，還是遺憾。世界上有不絕的風景，我有不老的心情。</p>
</div>
</body>
</html>Isu keserasian penyemak imbas silang
Apabila menjajarkan elemen seperti ini, adalah idea yang baik untuk menentukan terlebih dahulu jidar dan pelapik elemen. Ini adalah untuk mengelakkan perbezaan visual dalam pelayar yang berbeza.
IE8 dan lebih awal mempunyai masalah apabila menggunakan atribut apungan. Jika elemen kontena (dalam kes ini <div class="container">) mempunyai lebar yang ditentukan dan pengisytiharan !DOCTYPE tiada, IE8 dan versi terdahulu akan menambah margin 17px ke kanan. Ini nampaknya ruang simpanan yang menatal. Apabila menggunakan atribut apungan, sentiasa tetapkan dalam pengisytiharan DOCTYPE!
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>當使用浮動屬性對齊,總是包括!DOCTYPE聲明!如果丟失,它將會在IE瀏覽器產(chǎn)生奇怪的結(jié)果。</p>
</div>
</body>
</html>
