บทความนี้สาธิตการจัดตำแหน่งที่ถูกต้องของ div พร้อมตัวอย่างที่ใช้ได้จริงโดยใช้ CSS
- วิธีจัดตำแหน่ง Div ให้ถูกต้องโดยใช้ CSS
- การใช้คุณสมบัติ 'ลอย'
- การใช้คุณสมบัติ 'ถูกต้อง'
- การใช้เค้าโครงแบบยืดหยุ่น
- การใช้เค้าโครงกริด
วิธีจัดตำแหน่ง Div ให้ถูกต้องโดยใช้ CSS
นักพัฒนาซอฟต์แวร์สามารถจัดองค์ประกอบ div หรือรูปภาพแต่ละรายการให้ถูกต้องเพื่อให้เว็บไซต์ดูน่าสนใจยิ่งขึ้น เนื่องจากมีความยืดหยุ่นสูง จึงสามารถใช้องค์ประกอบ div ได้หลายวิธีบนหน้าเว็บ เช่น การกำหนดส่วนของหน้า การสร้างคอลัมน์ และการรวมชุดของเนื้อหาที่เกี่ยวข้อง
ทำตามวิธีการด้านล่างเพื่อจัดตำแหน่ง div ให้ถูกต้อง:
วิธีที่ 1: การใช้คุณสมบัติ “float”
ในไฟล์ HTML ให้สร้าง div และกำหนดคลาสเป็น “ จัดชิดขวา '. คลาสและ div นี้ใช้ตลอดทั้งบทความนี้
< แผนก ระดับ = 'ชิดขวา' >
< หน้า > นี่คือเนื้อหาบางส่วน < / หน้า >
< / แผนก >
ตอนนี้ เลือกคลาส div นั้น “ จัดชิดขวา ” และกำหนดคุณสมบัติของ CSS คุณสมบัติเหล่านี้ใช้สำหรับการแสดงภาพที่ดีขึ้น:
.align-to-right {
ลอย: ขวา;
ช่องว่างภายใน: 10px;
พื้นหลัง- สี : ฮอตพิ้ง;
}
ในรหัสข้างต้น ' ลอย ” คุณสมบัติถูกตั้งค่าไปทางขวา มันลอยหรือย้าย div ในทิศทางที่ถูกต้องบนหน้าเว็บ คุณสมบัติการเติมและสีพื้นหลังถูกตั้งค่าเป็น “ 10px ' และ ' ฮอตพิ้ง ” ตามลำดับ
หลังจากรวบรวมส่วนย่อยของโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ด้านบนยืนยันว่า div เคลื่อนไปในทิศทางที่ถูกต้อง
วิธีที่ 2: การใช้คุณสมบัติ 'ถูกต้อง'
ใน CSS เลือกคลาส div และตั้งค่า “ ขวา คุณสมบัติ ” เป็น 0 ทำให้แน่ใจว่าระยะห่างของ div ที่เลือกจากด้านขวาเท่ากับศูนย์ จากนั้นตั้งค่า “ ตำแหน่ง ” คุณสมบัติเป็น “ แน่นอน ” เพื่อให้ตำแหน่ง div คงที่ ในตอนท้าย ใช้คุณสมบัติการจัดรูปแบบเพื่อให้เห็นภาพดีขึ้น:
.align-to-right{
ขวา: 0 ;
ตำแหน่ง: แน่นอน;
ช่องว่างภายใน: 10px;
พื้นหลัง- สี : สีม่วงกลาง;
}
หลังจากรันโค้ดหน้าเว็บจะเป็นดังนี้:
ผลลัพธ์แสดงว่า div ถูกจัดชิดขวาแล้ว
วิธีที่ 3: การใช้เค้าโครงแบบยืดหยุ่น
Flex เป็นวิธีที่มีประสิทธิภาพมากที่สุด และจะคงเลย์เอาต์ระหว่างปรับขนาดหน้าต่าง div สามารถจัดชิดขวาได้โดยใช้ CSS “ เค้าโครงแบบยืดหยุ่น ' คุณสมบัติ. เค้าโครง Flex มีคุณสมบัติมากมายสำหรับวัตถุประสงค์ที่แตกต่างกัน
ในไฟล์ HTML ให้สร้าง div พาเรนต์ และภายในนั้นสร้าง div พี่น้องสองตัว นอกจากนี้ ให้กำหนดแต่ละ div เป็นคลาสเฉพาะ:
< แผนก ระดับ = 'ชิดขวา' >< แผนก ระดับ = 'ชิดซ้าย' >
< หน้า >นี่คือบางส่วนเพิ่มเติม เนื้อหา .< / หน้า >
< / แผนก >
< แผนก ระดับ = 'ชิดขวา' >
< h1 >สวัสดีจาก Linuxint < / h1 >
< / แผนก >
< / แผนก >
ตอนนี้อยู่ใน ' <สไตล์> ” แท็กเพิ่มคุณสมบัติ CSS ต่อไปนี้:
.align-to-right {จอแสดงผล: ดิ้น;
ปรับ- เนื้อหา : ช่องว่างระหว่าง;
}
.ชิดขวา {
จัดตำแหน่งตัวเอง: flex-end;
ช่องว่างภายใน: 10px;
พื้นหลัง- สี : สีม่วงกลาง;
}
ในรหัสข้างต้น
- กำหนด “ ดิ้น ” และ “ช่องว่างระหว่าง” ค่าเป็น “ แสดง ' และ ' ปรับเนื้อหา ” คุณสมบัติตามลำดับ คุณสมบัติเหล่านี้ทำให้ div เป็นแบบยืดหยุ่นและวางระยะห่างที่เท่ากันระหว่าง div ย่อย
- “ จัดตำแหน่งตัวเอง ” คุณสมบัติถูกตั้งค่าเป็น “ ปลายงอ ” ซึ่งทำให้จัดแนวไปทางด้านขวาของคอนเทนเนอร์
หลังจากดำเนินการหน้าเว็บโค้ดด้านบนจะมีลักษณะดังนี้:
ผลลัพธ์แสดงว่า div ถูกจัดชิดขวาโดยใช้เค้าโครงแบบยืดหยุ่น
วิธีที่ 4: การใช้เค้าโครงตาราง
เค้าโครงกริดยังสามารถใช้เพื่อจัด div ให้ชิดขวาได้อีกด้วย โครงสร้างรหัส HTML ยังคงเหมือนเดิม:
.align-to-right {จอแสดงผล: ตาราง;
ตารางแม่แบบคอลัมน์: ทำซ้ำ ( 2 , 1fr ) ;
}
.ชิดขวา {
ตาราง-คอลัมน์- เริ่ม : 2 ;
ช่องว่างภายใน: 10px;
พื้นหลัง- สี : นกเป็ดน้ำ;
}
คำอธิบายของรหัสได้รับด้านล่าง:
- ขั้นแรก เลือกคลาส div พาเรนต์ “ .align-to-right ” และตั้งค่า “ แสดง ” คุณสมบัติเป็น “ กริด '.
- จากนั้นสร้างสองคอลัมน์ที่มีขนาดเท่ากันโดยใช้ “ ตารางแม่แบบคอลัมน์ ' ตั้งค่าให้ ' ทำซ้ำ (2, 1fr) '.
- ในตอนท้าย เลือกคลาส div ลูก “ .ชิดขวา ” และตั้งค่า “ ตาราง-คอลัมน์-เริ่มต้น ” คุณสมบัติเป็น 2 คุณสมบัตินี้เริ่มต้นองค์ประกอบจากคอลัมน์ที่สอง เช่น จากด้านขวา
หลังจากรันโค้ดด้านบนแล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์แสดงให้เห็นว่า div อยู่ในแนวที่ถูกต้องโดยใช้ ' กริด ” คุณสมบัติเค้าโครง
บทสรุป
หากต้องการจัดตำแหน่ง div ในทิศทางที่ถูกต้อง ให้ใช้ “ ลอย ”, “ ขวา ”, “ เค้าโครงแบบยืดหยุ่น ', และ ' เค้าโครงกริด ' คุณสมบัติ. “ ลอย ” คุณสมบัติกำหนดไปทางขวาโดยกำหนดค่า “ 0px '. สำหรับ “ ดิ้น ” ให้ตั้งค่าการแสดงผลเป็น flex และใช้คุณสมบัติ “ จัดตำแหน่งตัวเอง ” คุณสมบัติเป็น “ ปลายงอ '. ใช้คุณสมบัติกริด สร้างคอลัมน์ขนาดเท่ากันสองคอลัมน์ และทำให้ div ลูกเริ่มต้นจากคอลัมน์ที่สอง