Artikel ini menunjukkan penyelarasan div yang benar dengan contoh praktis menggunakan CSS.
- Bagaimana Cara Meratakan Div Menggunakan CSS?
- Menggunakan Properti 'float'.
- Menggunakan Properti yang “benar”.
- Menggunakan Tata Letak Fleksibel
- Menggunakan Tata Letak Grid
Bagaimana Cara Meratakan Div Menggunakan CSS?
Pengembang dapat menyelaraskan setiap elemen atau gambar div dengan cara yang membuat situs web lebih menarik. Karena fleksibilitasnya yang tinggi, elemen div dapat digunakan dalam beberapa cara di halaman web seperti menentukan bagian halaman, membuat kolom, dan membungkus kumpulan konten terkait.
Ikuti metode di bawah ini untuk menyelaraskan kanan div:
Metode 1: Menggunakan Properti 'float'.
Di file HTML, buat div dan tetapkan kelas ' sejajarkan ke kanan ”. Kelas dan div ini digunakan di seluruh artikel ini.
< div kelas = 'sejajarkan ke kanan' >
< P > Ini beberapa konten. < / P >
< / div >
Sekarang, pilih kelas div itu “ sejajarkan ke kanan ” dan tetapkan properti CSS. Properti ini digunakan untuk visualisasi yang lebih baik:
.align-ke-kanan {
mengapung: benar;
padding: 10px;
latar belakang- warna : hotpink;
}
Pada kode di atas, “ mengambang ” Properti diatur ke kanan. Mengapung atau memindahkan div ke arah yang benar di halaman web. Properti padding dan background-color diatur ke “ 10px ' Dan ' hotpink ” masing-masing.
Setelah mengkompilasi potongan kode di atas, halaman web terlihat seperti ini:
Output di atas mengonfirmasi bahwa div bergerak ke arah yang benar.
Metode 2: Menggunakan Properti 'benar'.
Di CSS, pilih kelas div dan atur “ Kanan ” ke 0. Ini memastikan bahwa jarak div yang dipilih dari sisi kanan sama dengan nol. Kemudian, atur ' posisi ” properti ke “ mutlak ” untuk membuat posisi div tetap. Pada akhirnya, terapkan beberapa properti gaya untuk visualisasi yang lebih baik:
.align-ke-kanan{
Kanan: 0 ;
posisi: mutlak;
padding: 10px;
latar belakang- warna : ungu sedang;
}
Setelah mengeksekusi halaman web kode terlihat seperti ini:
Output menunjukkan bahwa div sekarang rata kanan.
Metode 3: Menggunakan Tata Letak Flex
Flex adalah metode yang paling efisien, dan mempertahankan tata letak selama mengubah ukuran jendela. Div dapat diratakan ke kanan menggunakan CSS “ Tata Letak Fleksibel ” properti. Tata letak Flex berisi banyak properti untuk tujuan berbeda.
Dalam file HTML buat div induk dan di dalamnya buat dua div saudara. Juga, tetapkan setiap div sebuah kelas unik:
< div kelas = 'sejajarkan ke kanan' >< div kelas = 'rata kiri' >
< P > Ini beberapa lagi isi .< / P >
< / div >
< div kelas = 'sejajar kanan' >
< h1 >Halo Dari Linuxint < / h1 >
< / div >
< / div >
Sekarang di dalam '
tampilan: fleksibel;
membenarkan- isi : ruang-antara;
}
.kanan-sejajar {
menyelaraskan diri: flex-end;
padding: 10px;
latar belakang- warna : ungu sedang;
}
Pada kode di atas,
- Tetapkan “ melenturkan ” dan nilai “spasi-antara” ke “ menampilkan ' Dan ' membenarkan-konten ” properti, masing-masing. Properti ini membuat div menjadi fleksibel dan menempatkan jarak yang sama antara div anak.
- “ menyelaraskan diri properti ” diatur ke “ flex-end ”, yang menyebabkannya sejajar dengan sisi kanan wadah.
Setelah mengeksekusi halaman web kode di atas terlihat seperti ini:
Keluarannya menunjukkan bahwa div disejajarkan dengan benar menggunakan tata letak fleksibel.
Metode 4: Menggunakan Tata Letak Kisi
Tata letak kisi juga dapat digunakan untuk menyelaraskan div dengan benar. Struktur kode HTML tetap sama:
.align-ke-kanan {tampilan: kisi;
kisi-templat-kolom: ulangi ( 2 , 1fr ) ;
}
.kanan-sejajar {
kolom-kisi- awal : 2 ;
padding: 10px;
latar belakang- warna : teal;
}
Deskripsi kode diberikan di bawah ini:
- Pertama, pilih kelas div induk “ .align-ke-kanan ” dan atur “ menampilkan ” properti ke “ kisi ”.
- Kemudian, buat dua kolom dengan ukuran yang sama menggunakan “ grid-template-columns ' mulai ' ulangi(2, 1fr) ”.
- Pada akhirnya, pilih kelas div anak “ .kanan-sejajar ” dan atur “ kisi-kolom-mulai ” properti ke 2. Properti ini memulai elemen dari kolom kedua, yaitu dari sisi kanan.
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Outputnya mengilustrasikan bahwa div sekarang disejajarkan dengan benar menggunakan “ kisi ” properti tata letak.
Kesimpulan
Untuk menyelaraskan div ke arah yang benar, gunakan “ mengambang ”, “ Kanan ”, “ tata letak fleksibel ', Dan ' tata letak kisi ” properti. “ mengambang ” set properti ke kanan dengan menetapkan nilai “ 0px ”. Untuk ' melenturkan ”, atur tampilan untuk melenturkan dan gunakan tombol “ menyelaraskan diri ” properti ke “ flex-end ”. Menggunakan properti grid, buat dua kolom berukuran sama dan buat div anak mulai dari kolom kedua.