Bài viết này trình bày cách căn chỉnh đúng của div bằng các ví dụ thực tế sử dụng CSS.
- Làm cách nào để căn chỉnh đúng một Div bằng CSS?
- Sử dụng thuộc tính “float”
- Sử dụng tài sản “đúng”
- Sử dụng Bố cục Flex
- Sử dụng bố cục lưới
Làm cách nào để căn chỉnh đúng một Div bằng CSS?
Nhà phát triển có thể căn chỉnh từng phần tử hoặc hình ảnh div theo cách làm cho trang web hấp dẫn hơn. Do tính linh hoạt cao, các phần tử div có thể được sử dụng theo nhiều cách trên trang web, chẳng hạn như xác định các phần của trang, tạo cột và bao bọc các tập hợp nội dung liên quan.
Thực hiện theo các phương pháp dưới đây để căn phải div:
Cách 1: Sử dụng thuộc tính “float”
Trong tệp HTML, hãy tạo một div và gán cho nó một lớp “ căn chỉnh sang phải ”. Lớp và div này được sử dụng xuyên suốt bài viết này.
< div lớp học = 'căn chỉnh sang phải' >
< P > Đây là một số nội dung. < / P >
< / div >
Bây giờ, hãy chọn lớp div đó “ căn chỉnh sang phải ” và gán các thuộc tính CSS. Các thuộc tính này được sử dụng để hiển thị tốt hơn:
.align-to-right {
nổi: đúng;
phần đệm: 10px;
lý lịch- màu sắc : hồng hào;
}
Trong đoạn mã trên, “ trôi nổi ” thuộc tính được đặt ở bên phải. Nó làm nổi hoặc di chuyển div theo đúng hướng trên trang web. Thuộc tính đệm và màu nền được đặt thành “ 10px ' Và ' hotpink ' tương ứng.
Sau khi biên dịch đoạn mã trên, trang web trông như thế này:
Đầu ra ở trên xác nhận rằng div di chuyển đúng hướng.
Cách 2: Sử dụng Thuộc tính “right”
Trong CSS, chọn lớp div và đặt “ Phải ” thành 0. Nó đảm bảo rằng khoảng cách của div đã chọn từ phía bên phải bằng 0. Sau đó, đặt “ chức vụ ” tài sản để “ tuyệt đối ” để cố định vị trí div. Cuối cùng, áp dụng một số thuộc tính kiểu dáng để hình dung rõ hơn:
.align-to-right{
Phải: 0 ;
vị trí: tuyệt đối;
phần đệm: 10px;
lý lịch- màu sắc : tím trung bình;
}
Sau khi thực thi mã trang web trông như thế này:
Đầu ra cho thấy div hiện được căn phải.
Phương pháp 3: Sử dụng Flex Layout
Flex là phương pháp hiệu quả nhất và nó duy trì bố cục trong quá trình thay đổi kích thước cửa sổ. Div có thể được căn phải bằng cách sử dụng CSS “ Bố cục linh hoạt ' của cải. Bố cục Flex chứa nhiều thuộc tính cho các mục đích khác nhau.
Trong tệp HTML, tạo một div cha và bên trong nó tạo hai div anh chị em. Ngoài ra, chỉ định mỗi div một lớp duy nhất:
< div lớp học = 'căn chỉnh sang phải' >< div lớp học = 'căn lề trái' >
< P >Đây là một số chi tiết nội dung .< / P >
< / div >
< div lớp học = 'Sắp xếp đúng' >
< h1 >Xin chào từ Linuxhint < / h1 >
< / div >
< / div >
Bây giờ bên trong “
hiển thị: uốn cong;
biện minh- nội dung : dấu cách giữa;
}
.Sắp xếp đúng {
căn chỉnh tự: flex-end;
phần đệm: 10px;
lý lịch- màu sắc : tím trung bình;
}
Trong đoạn mã trên,
- Giao phó ' uốn cong ” và “khoảng cách giữa các giá trị” thành “ trưng bày ' Và ' biện minh cho nội dung ” thuộc tính, tương ứng. Các thuộc tính này làm cho div linh hoạt và đặt khoảng cách bằng nhau giữa các div con.
- Các ' tự sắp xếp ” thuộc tính được đặt thành “ kết thúc uốn cong ”, khiến nó căn chỉnh về phía bên phải của vùng chứa.
Sau khi thực thi đoạn mã trên, trang web trông như thế này:
Đầu ra cho thấy div được căn phải bằng cách sử dụng bố cục flex.
Phương pháp 4: Sử dụng Grid Layout
Bố cục lưới cũng có thể được sử dụng để căn phải div. Cấu trúc mã HTML vẫn giữ nguyên:
.align-to-right {hiển thị: lưới;
lưới-mẫu-cột: lặp lại ( 2 , 1fr ) ;
}
.Sắp xếp đúng {
lưới-cột- bắt đầu : 2 ;
phần đệm: 10px;
lý lịch- màu sắc : mòng két;
}
Mô tả của mã được đưa ra dưới đây:
- Đầu tiên, chọn lớp div cha “ .align-to-right ” và thiết lập “ trưng bày ” tài sản để “ lưới ”.
- Sau đó, tạo hai cột có kích thước bằng nhau bằng cách sử dụng “ lưới-mẫu-cột ” đặt thành “ lặp lại(2, 1fr) ”.
- Cuối cùng, chọn lớp div con “ .Sắp xếp đúng ” và đặt “ lưới-cột-bắt đầu ” thành 2. Thuộc tính này bắt đầu phần tử từ cột thứ hai, tức là từ phía bên phải.
Sau khi thực thi đoạn mã trên, trang web trông như thế này:
Đầu ra minh họa rằng div hiện được căn phải bằng cách sử dụng “ lưới ” thuộc tính bố cục.
Phần kết luận
Để căn chỉnh div theo đúng hướng, hãy sử dụng “ trôi nổi ”, “ Phải ”, “ bố trí linh hoạt ', Và ' bố trí lưới ' của cải. Các ' trôi nổi ” đặt thuộc tính sang bên phải bằng cách gán giá trị “ 0px ”. Cho ' uốn cong ” thuộc tính, hãy đặt màn hình ở chế độ uốn cong và sử dụng thuộc tính “ tự sắp xếp ” tài sản để “ kết thúc uốn cong ”. Sử dụng thuộc tính lưới, tạo hai cột có kích thước bằng nhau và đặt div con bắt đầu từ cột thứ hai.