Trong Tailwind CSS, các phần tử được thay thế là những phần tử có nội dung được thay thế bằng tài nguyên bên ngoài, chẳng hạn như hình ảnh và video. Đôi khi, người dùng gặp khó khăn trong việc định vị phần tử được thay thế trong vùng chứa. Điều này là do các phần tử này có thể làm tràn vùng chứa nếu kích thước của chúng lớn hơn dung lượng có sẵn. Tailwind CSS cung cấp các lớp tiện ích để kiểm soát cách định vị và căn chỉnh nội dung của phần tử được thay thế trong vùng chứa.
Bài viết này sẽ minh họa phương pháp định vị các phần tử được thay thế trong vùng chứa trong Tailwind CSS.
Làm cách nào để định vị các phần tử được thay thế trong vùng chứa ở Tailwind?
Để định vị các phần tử được thay thế trong một vùng chứa trong Tailwind, hãy tạo một chương trình HTML và sử dụng “ đối tượng-
cú pháp
< yếu tố lớp học = 'đối tượng-
Ví dụ
Trong ví dụ này, chúng tôi sẽ tạo một vùng chứa và sử dụng tất cả “ đối tượng- ” (hình ảnh) để chỉ định vị trí thay thế của chúng trong vùng chứa:
< thân hình >
< div lớp học = 'bg-sky-300 grid grid-row-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< hình ảnh lớp học = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'object-none object-left w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'đối tượng-không có đối tượng-dưới cùng bên trái w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'đối tượng-không có đối tượng-trung tâm w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'object-none object-right-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'đối tượng-không có đối tượng-đúng w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< hình ảnh lớp học = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
thân hình >
Ở đây, trong phần tử cha
- “ bg-sky-300 ” đặt màu nền của vùng chứa thành bầu trời.
- “ lưới ” lớp cho phép bố trí dạng lưới.
- “ lưới-hàng-3 ” đặt số hàng trong lưới thành 3.
- “ grid-flow-col ” lớp xác định luồng các mục lưới trong các cột.
- “ m-5 ” lớp thêm 5 đơn vị lề xung quanh vùng chứa.
- “ không gian-y-4 ” lớp thêm khoảng cách dọc là 4 đơn vị giữa các phần tử
con trong vùng chứa.
- “ p-4 ” lớp thêm 4 đơn vị đệm vào nội dung bên trong vùng chứa.
- “ biện minh giữa ” lớp căn chỉnh các phần tử con bên trong vùng chứa và phân bổ chúng một cách đồng đều.
Trong các phần tử
:
- “ không có đối tượng ” lớp không áp dụng bất kỳ vị trí nào cho phần tử và hiển thị phần tử ở vị trí mặc định của nó trong vùng chứa.
- “ object-left-top ” lớp định vị phần tử
ở góc trên cùng bên trái của vùng chứa.
- “ đối tượng bên trái ” lớp căn chỉnh phần tử với cạnh trái của vùng chứa và giữ cho phần tử được căn giữa theo chiều dọc.
- “ object-left-bottom ” lớp định vị phần tử
ở góc dưới cùng bên trái của vùng chứa của nó.
- “ đối tượng hàng đầu ” lớp định vị phần tử ở cạnh trên cùng của vùng chứa và đặt phần tử ở giữa theo chiều ngang.
- “ trung tâm đối tượng ” lớp định vị phần tử ở giữa vùng chứa và giữ nó ở giữa theo chiều ngang và chiều dọc.
- “ đối tượng dưới cùng ” lớp định vị phần tử ở cạnh dưới cùng của vùng chứa và giữ cho phần tử được căn giữa theo chiều ngang.
- “ object-right-top ” đặt phần tử
vào góc trên bên phải của vùng chứa.
- “ đối tượng bên phải ” lớp định vị phần tử vào cạnh phải của vùng chứa và giữ cho phần tử được căn giữa theo chiều dọc.
- “ object-right-bottom ” lớp định vị phần tử ở góc dưới cùng bên phải của vùng chứa.
đầu ra
Trong trang web trên, có thể thấy rằng tất cả nội dung của phần tử được thay thế đã được định vị thành công.
Phần kết luận
Để định vị các phần tử được thay thế trong một vùng chứa trong Tailwind, nút “ đối tượng-
” tiện ích được sử dụng với các yếu tố mong muốn, chẳng hạn như hình ảnh. Người dùng cần xác định vị trí hoặc cạnh cụ thể, tức là trái, phải hoặc trung tâm trong tiện ích “đối tượng- ” để định vị các phần tử được thay thế. Bài viết này đã minh họa phương pháp định vị các phần tử được thay thế trong một vùng chứa trong Tailwind CSS.