ใน Tailwind CSS องค์ประกอบที่ถูกแทนที่คือองค์ประกอบที่เนื้อหาถูกแทนที่ด้วยทรัพยากรภายนอก เช่น รูปภาพและวิดีโอ บางครั้ง ผู้ใช้ต้องเผชิญกับความท้าทายในการวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ นี่เป็นเพราะองค์ประกอบเหล่านี้สามารถล้นคอนเทนเนอร์ได้หากขนาดขององค์ประกอบนั้นใหญ่กว่าพื้นที่ที่มีอยู่ Tailwind CSS มีคลาสยูทิลิตี้เพื่อควบคุมวิธีการวางตำแหน่งและการจัดตำแหน่งเนื้อหาขององค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์
บทความนี้จะแสดงวิธีการวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ใน Tailwind CSS
จะวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ใน Tailwind ได้อย่างไร
หากต้องการวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ใน Tailwind ให้สร้างโปรแกรม HTML และใช้ปุ่ม ' วัตถุ-<ตำแหน่ง/ด้าน> ” ยูทิลิตี้พร้อมองค์ประกอบที่ต้องการ จำเป็นต้องกำหนดด้านเฉพาะ เช่น ซ้าย ขวา หรือกึ่งกลางในยูทิลิตี้ “object-
ไวยากรณ์
< องค์ประกอบ ระดับ = 'วัตถุ-<ตำแหน่ง/ด้าน> ...' > ... องค์ประกอบ >
ตัวอย่าง
ในตัวอย่างนี้ เราจะสร้างคอนเทนเนอร์และใช้ ' วัตถุ-<ตำแหน่ง/ด้าน> ” สาธารณูปโภคพร้อม “ ” (ภาพ) องค์ประกอบเพื่อระบุตำแหน่งที่ถูกแทนที่ภายในคอนเทนเนอร์:
< ร่างกาย >
< แผนก ระดับ = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 ปรับระยะห่างระหว่าง' >
< img ระดับ = 'วัตถุไม่มีวัตถุซ้ายบน w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุซ้าย w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุด้านล่างซ้าย w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุด้านบน w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุ-ไม่มีวัตถุ-ศูนย์กลาง w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุด้านล่าง w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุด้านบนขวา w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุขวา w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ระดับ = 'วัตถุไม่มีวัตถุด้านล่างขวา w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
แผนก >
ร่างกาย >
ที่นี่ในพาเรนต์
- “ bg-sky-300 ” คลาสกำหนดสีพื้นหลังของคอนเทนเนอร์ เป็นท้องฟ้า
- “ กริด ” class เปิดใช้งานเค้าโครงกริด
- “ ตารางแถว-3 ” class กำหนดหมายเลขแถวในตารางเป็น 3
- “ กริดโฟลว์คอล ” คลาสกำหนดโฟลว์ของรายการกริดในคอลัมน์
- “ ม.5 ” คลาสเพิ่มระยะขอบ 5 หน่วยรอบคอนเทนเนอร์
- “ สเปซ-y-4 ” คลาสเพิ่มระยะห่างแนวตั้ง 4 หน่วยระหว่างองค์ประกอบย่อย
ภายในคอนเทนเนอร์
- “ หน้า-4 ” class เพิ่ม 4 หน่วยของช่องว่างภายในเนื้อหาภายในคอนเทนเนอร์
- “ ปรับระหว่าง ” class จัดตำแหน่งองค์ประกอบย่อยภายในคอนเทนเนอร์และกระจายอย่างสม่ำเสมอ
ในองค์ประกอบ
:
- “ วัตถุไม่มี ” คลาสไม่ได้ใช้ตำแหน่งใด ๆ กับองค์ประกอบและแสดงองค์ประกอบที่ตำแหน่งเริ่มต้นในคอนเทนเนอร์
- “ วัตถุซ้ายบน ” class วางตำแหน่งองค์ประกอบ
ที่มุมบนซ้ายของคอนเทนเนอร์
- “ วัตถุซ้าย ” class จัดองค์ประกอบให้ชิดขอบด้านซ้ายของคอนเทนเนอร์และจัดให้อยู่ในแนวตั้งตรงกลาง
- “ วัตถุซ้ายล่าง ” class วางตำแหน่งองค์ประกอบ
ที่มุมล่างซ้ายของคอนเทนเนอร์
- “ วัตถุด้านบน ” class วางตำแหน่งองค์ประกอบที่ขอบบนสุดของคอนเทนเนอร์และตั้งค่าให้อยู่กึ่งกลางในแนวนอน
- “ ศูนย์วัตถุ ” class วางตำแหน่งองค์ประกอบที่กึ่งกลางของคอนเทนเนอร์และจัดให้อยู่ในแนวนอนและแนวตั้ง
- “ วัตถุด้านล่าง ” คลาสจะวางตำแหน่งองค์ประกอบไว้ที่ขอบด้านล่างของคอนเทนเนอร์และจัดองค์ประกอบให้อยู่ในแนวนอน
- “ วัตถุขวาบน ” class วางตำแหน่งองค์ประกอบ
ที่มุมบนขวาของคอนเทนเนอร์
- “ วัตถุขวา ” class วางตำแหน่งองค์ประกอบไว้ที่ขอบด้านขวาของคอนเทนเนอร์และจัดให้อยู่ในแนวตั้ง
- “ วัตถุขวาล่าง ” class วางตำแหน่งองค์ประกอบไว้ที่มุมล่างขวาของคอนเทนเนอร์
เอาต์พุต
ในหน้าเว็บข้างต้น สังเกตได้ว่าเนื้อหาขององค์ประกอบที่ถูกแทนที่ทั้งหมดได้รับการจัดตำแหน่งเรียบร้อยแล้ว
บทสรุป
หากต้องการวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ใน Tailwind ให้ใช้ปุ่ม ' วัตถุ-<ตำแหน่ง/ด้าน> ” ยูทิลิตี้ใช้กับองค์ประกอบที่ต้องการเช่นรูปภาพ ผู้ใช้จำเป็นต้องกำหนดตำแหน่งหรือด้านเฉพาะ เช่น ซ้าย ขวา หรือกึ่งกลางในยูทิลิตี้ “object-
” เพื่อจัดตำแหน่งองค์ประกอบที่ถูกแทนที่ บทความนี้แสดงวิธีการวางตำแหน่งองค์ประกอบที่ถูกแทนที่ภายในคอนเทนเนอร์ใน Tailwind CSS