Artikel ini menunjukkan penjajaran yang betul bagi div dengan contoh praktikal menggunakan CSS.
- Bagaimana Menjajarkan Div Dengan Kanan Menggunakan CSS?
- Menggunakan Harta 'terapung'.
- Menggunakan Harta 'betul'.
- Menggunakan Reka Letak Flex
- Menggunakan Tata Letak Grid
Bagaimana Menjajarkan Div Dengan Kanan Menggunakan CSS?
Pembangun boleh menjajarkan setiap elemen atau imej div dengan betul dengan cara yang menjadikan tapak web lebih menarik. Disebabkan fleksibiliti yang tinggi, elemen div boleh digunakan dalam beberapa cara di halaman web seperti menentukan bahagian halaman, mencipta lajur dan membungkus set kandungan yang berkaitan.
Ikuti kaedah di bawah untuk menyelaraskan div:
Kaedah 1: Menggunakan Harta 'float'.
Dalam fail HTML, buat div dan tetapkan kelas ' sejajar-ke-kanan ”. Kelas dan div ini digunakan sepanjang artikel ini.
< div kelas = 'sejajarkan ke kanan' >
< hlm > Ini adalah beberapa kandungan. < / hlm >
< / div >
Sekarang, pilih kelas div itu “ sejajar-ke-kanan ” dan tetapkan sifat CSS. Sifat ini digunakan untuk visualisasi yang lebih baik:
.selaraskan-ke-kanan {
terapung: betul;
padding: 10px;
latar belakang- warna : hotpink;
}
Dalam kod di atas, ' terapung ” harta ditetapkan ke kanan. Ia mengapung atau menggerakkan div ke arah yang betul pada halaman web. Sifat padding dan warna latar belakang ditetapkan kepada “ 10px ” dan “ hotpink ” masing-masing.
Selepas menyusun coretan kod di atas, halaman web kelihatan seperti ini:
Output di atas mengesahkan bahawa div bergerak ke arah yang betul.
Kaedah 2: Menggunakan Harta 'betul'.
Dalam CSS, pilih kelas div dan tetapkan ' betul ” property to 0. Ia memastikan jarak div yang dipilih dari sebelah kanan adalah sama dengan sifar. Kemudian, tetapkan ' kedudukan ” harta kepada “ mutlak ” untuk membuat kedudukan div tetap. Pada akhirnya, gunakan beberapa sifat penggayaan untuk visualisasi yang lebih baik:
.selaraskan-ke-kanan{
betul: 0 ;
jawatan: mutlak;
padding: 10px;
latar belakang- warna : ungu sederhana;
}
Selepas melaksanakan halaman web kod kelihatan seperti ini:
Output menunjukkan bahawa div kini dijajarkan ke kanan.
Kaedah 3: Menggunakan Reka Letak Flex
Flex ialah kaedah yang paling cekap, dan ia mengekalkan reka letak semasa mengubah saiz tetingkap. Div boleh dijajarkan ke kanan menggunakan CSS “ Reka Letak Flex ” hartanah. Reka letak Flex mengandungi banyak sifat untuk tujuan yang berbeza.
Dalam fail HTML buat div induk dan di dalamnya mencipta dua div adik-beradik. Juga, berikan setiap div kelas unik:
< div kelas = 'sejajarkan ke kanan' >< div kelas = 'berjajar kiri' >
< hlm > Ini adalah beberapa lagi kandungan .< / hlm >
< / div >
< div kelas = 'dijajarkan ke kanan' >
< h1 >Hello Dari Linuxhint < / h1 >
< / div >
< / div >
Sekarang di dalam '
paparan: flex;
mewajarkan- kandungan : ruang-antara;
}
.dijajar kanan {
align-self: flex-end;
padding: 10px;
latar belakang- warna : ungu sederhana;
}
Dalam kod di atas,
- Tugaskan ' lentur nilai ” dan “ruang-antara” kepada “ paparan ” dan “ justify-content ” hartanah, masing-masing. Sifat ini menjadikan div fleksibel dan meletakkan jarak yang sama antara div kanak-kanak.
- ' align-self ' harta ditetapkan kepada ' hujung lentur ”, yang menyebabkan ia menjajar ke sebelah kanan bekas.
Selepas melaksanakan halaman web kod di atas kelihatan seperti ini:
Output menunjukkan bahawa div dijajarkan dengan betul menggunakan reka letak fleksibel.
Kaedah 4: Menggunakan Susun Atur Grid
Susun atur grid juga boleh digunakan untuk menyelaraskan div. Struktur kod HTML tetap sama:
.selaraskan-ke-kanan {paparan: grid;
grid-template-lajur: ulang ( 2 , 1fr ) ;
}
.dijajar kanan {
lajur grid- mulakan : 2 ;
padding: 10px;
latar belakang- warna : teal;
}
Penerangan kod diberikan di bawah:
- Mula-mula, pilih kelas div induk ' .selaraskan-ke-kanan 'dan tetapkan' paparan ” harta kepada “ grid ”.
- Kemudian, buat dua lajur dengan saiz yang sama menggunakan “ grid-template-lajur ' ditetapkan untuk ' ulangi(2, 1fr) ”.
- Pada akhirnya, pilih kelas div kanak-kanak ' .dijajar kanan ” dan tetapkan “ grid-lajur-mula ” property to 2. Properti ini memulakan elemen dari lajur kedua iaitu dari sebelah kanan.
Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:
Output menggambarkan bahawa div kini dijajarkan dengan betul menggunakan ' grid ” sifat susun atur.
Kesimpulan
Untuk menjajarkan div ke arah yang betul, gunakan ' terapung ”, “ betul ”, “ susun atur fleksibel ”, dan “ susun atur grid ” hartanah. ' terapung ' harta ditetapkan ke kanan dengan memberikan nilai ' 0px ”. Untuk ' lentur harta ”, tetapkan paparan agar lentur dan gunakan “ align-self ” harta kepada “ hujung lentur ”. Menggunakan sifat grid, buat dua lajur saiz yang sama dan jadikan div kanak-kanak bermula dari lajur kedua.