masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>突然开始怀念花开。粉色的樱，蓝色的龙胆，堇色的熏衣草，由近而远，延伸向远方天空的尽头。</p> <p>爱你现在的时光。过去的已经过去了，较什么劲呢？未来的还没有来，焦虑什么呢？你知道什么是真正的恐惧吗？</p> </div> <p><b>Note: </b>短篇小说</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492413 permainan