masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网(php.cn)</title>
    <style>
        .center
        {
            margin:auto;
            width:70%;
            background-color:#b0e0e6;
        }
    </style>
</head>

<body>
<div class="center">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</body>
</html>

Petua: Jika lebarnya 100%, penjajaran tiada kesan.

Jalankan program dan cuba

Gunakan 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中文网(php.cn)</title>
    <style>
        .right
        {
            position:absolute;
            right:0px;
            width:300px;
            background-color: #4ce667;
        }
    </style>
</head>

<body>
<div class="right">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

Nota: Kedudukan mutlak tiada kaitan dengan aliran dokumen, jadi ia boleh meliputi elemen lain pada halaman.

Jalankan program dan cuba

Gunakan 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中文网(php.cn)</title>
    <style>
        .right
        {
            float:right;
            width:300px;
            background-color:#b0e0e6;
        }
    </style>
</head>

<body>
<div class="right">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

Jalankan atur cara dan cuba




Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p> <p>青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p> </div> </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)  492461 permainan