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>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</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浏览器产生奇怪的结果。</p>
</div>
</body>
</html>
bahagian seterusnya