เนื้อหา
- คำสั่ง
- กำหนดตำแหน่งที่แน่นอนของแท็ก div
- box1 {margin-left: 100px; }
- box2 {margin-left: 400px; }
- box3 {margin-left: 700px; }
- ลอยองค์ประกอบ DIV
- เคล็ดลับ
- การเตือน
- สิ่งที่คุณต้องการ
แท็ก "div" ของ HTML กำหนดเค้าโครงของหน้าเว็บ สไตล์ชีตแบบเรียงซ้อนใช้ในการจัดรูปแบบแท็ก HTML ภายในหน้าเว็บ คุณสมบัติ "id" และ "class" ถูกใช้ใน CSS เพื่อใช้สไตล์ที่แน่นอน สไตล์เหล่านั้นที่ใช้ร่วมกันกับแท็ก "div" หลายรายการสามารถกำหนดได้ใน "คลาส" แต่ต้องกำหนดสไตล์ที่ไม่ซ้ำกับคุณสมบัติ "id" ของแท็ก "div" โดยเฉพาะเนื่องจากคุณสมบัตินี้สามารถใช้ได้เพียงครั้งเดียว องค์ประกอบ div ที่อยู่ติดกันจะปรากฏด้านล่างองค์ประกอบ "div" ก่อนหน้าเว้นแต่จะมีการใช้สไตล์การจัดตำแหน่งแนวนอน
คำสั่ง
-
เปิดหน้า HTML และไฟล์ CSS ที่เกี่ยวข้องในสองหน้าต่างที่แตกต่างจาก HTML หรือโปรแกรมแก้ไขข้อความพื้นฐานเช่น Notepad
-
ค้นหาแท็ก div ทั้งหมดที่จะจัดตำแหน่งและสร้างคลาส "halign" ที่ไม่ซ้ำกัน:
กองแรกกองที่สองกองที่สาม
หากมีการใช้ "halign" เป็นชื่อคลาสที่อื่นใน HTML ให้ใช้อีกอันหนึ่งและตรวจสอบให้แน่ใจว่าเป็นชื่อเฉพาะ
-
ตั้งชื่อ "id" ให้กับองค์ประกอบ "div" ทั้งหมดที่ต้องจัดตำแหน่ง รวมตัวเลขภายในชื่อเพื่อระบุคำสั่งซื้อ ตัวอย่างเช่นใช้ชื่อ "box1", "box2" และอื่น ๆ :
กองแรกกองที่สองกองที่สาม
จดชื่อ "id" ที่ใช้ไปแล้ว
-
เปิดไฟล์ CSS และป้อนข้อมูลต่อไปนี้:
.halign {position: absolute; ด้านบน: XXX; }
แทนที่ "XXX" ด้วยค่ามาร์จิ้นระหว่างเส้นบนสุดและเส้นแนวนอน ใช้ค่าพิกเซลหรือเปอร์เซ็นต์ขึ้นอยู่กับองค์ประกอบ div อื่น ๆ ที่อยู่เหนือคลาส "halign"
-
แก้ไขบล็อกสไตล์ "div" แต่ละรายการใน CSS ค้นหาชื่อ "id" ในรหัสและเพิ่มบรรทัด "left: YYY" ในแต่ละบล็อคแทนที่ "YYY" ด้วยค่าสัมบูรณ์ของระยะขอบซ้ายขององค์ประกอบ "ระยะขอบสมบูรณ์" คือช่องว่างระหว่างขอบของหน้าจอเบราว์เซอร์และ div ที่เกี่ยวข้อง ระยะขอบจะมีค่ามากขึ้นเพื่อให้ div ข้างกัน:
box1 {margin-left: 100px; }
box2 {margin-left: 400px; }
box3 {margin-left: 700px; }
กำหนดตำแหน่งที่แน่นอนของแท็ก div
-
เปิดไฟล์ CSS ในเท็กซ์เอดิเตอร์
-
กำหนดชื่อ "คลาส" ที่ไม่ซ้ำกันเช่น "halign" ป้อน "float: left;" ในบล็อกรหัสและบันทึกไฟล์
-
เปิด HTML ในหน้าต่างแก้ไขข้อความใหม่และตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดที่จำเป็นต้องจัดตำแหน่งอยู่ติดกัน
-
เชื่อมต่อชื่อคลาส "halign" กับองค์ประกอบ "div" ที่อยู่ติดกันซึ่งจำเป็นต้องจัดตำแหน่ง
-
วางรหัสต่อไปนี้ไว้ด้านบนของกลุ่มองค์ประกอบ "div" ใน HTML:
ลอยองค์ประกอบ DIV
เคล็ดลับ
- หากมีการใช้ชื่อคลาสใด ๆ ใน divs ที่เป็นปัญหาให้ป้อนชื่อคลาสเพิ่มเติมและแยกพวกเขาด้วยอักขระเว้นวรรค ใช้เปอร์เซ็นต์สำหรับค่ามาร์จิ้นและช่องว่างหากหน้าเว็บมีความกว้างของของไหลเพื่อให้ขนาดบล็อกและเส้นขอบเปลี่ยนแปลงโดยอัตโนมัติตามขนาดและความละเอียดของหน้าจอ องค์ประกอบการออกแบบในหน้าเว็บที่มีความกว้างคงที่ไม่สามารถปรับให้เข้ากับขนาดหน้าจอหรือความละเอียดได้และค่าพิกเซลเหมาะสมสำหรับระยะขอบ
การเตือน
- รหัส CSS บางอย่างสร้างพฤติกรรมที่ไม่ซ้ำกันในเบราว์เซอร์ที่แตกต่างกัน ทดสอบความเข้ากันได้ของโค้ด CSS และ HTML ทั้งหมด การไม่ทดสอบสิ่งนี้สามารถลดความสามารถในการเข้าถึงและการใช้งานหน้าเว็บ
สิ่งที่คุณต้องการ
- แก้ไขข้อความ