คุณมีเว็บไซต์ แต่กล่อง div ไม่เรียงกัน สิ่งนี้อาจเกิดขึ้นได้จากหลายสาเหตุโดยเฉพาะเมื่อคุณพิจารณาปัญหาเกี่ยวกับตำแหน่งของ div จากเว็บไซต์หนึ่งไปยังอีกเว็บไซต์หนึ่ง ในทำนองเดียวกันองค์ประกอบของกล่องอาจทับซ้อนกันด้วยเหตุผลบางอย่างตั้งแต่ข้อผิดพลาดการวางตำแหน่งจนถึงปัญหาการล้นและปัญหาโฟลตอย่างง่าย ในกรณีส่วนใหญ่การเปลี่ยนสไตล์ชีตของเว็บไซต์ของคุณอย่างรวดเร็วและง่ายดายจะช่วยแก้ไขปัญหาได้

1

เพิ่มระยะขอบถ้ากล่องไม่มีขอบและทับซ้อนในขณะนี้เพียงเล็กน้อย คุณสามารถตั้งค่าระยะขอบได้เพียงด้านเดียวเช่นด้านซ้ายหากคุณต้องการใช้องค์ประกอบขอบเพื่อผลักองค์ประกอบกล่องอื่น ๆ ออกไป ตัวอย่างเช่นถ้าวาง div A และ div B ไว้ข้างๆกันและ div B ทับซ้อนกันทางด้านซ้ายคุณสามารถแก้ไขสไตล์ชีทของคุณเพื่อเพิ่มระยะขอบด้านซ้ายไปที่ div A ดังนี้:

a {width: 100px; ระยะขอบซ้าย: 10px; }

2

ค้นหาสไตล์ชีทของคุณเพื่อหาค่าการจัดตำแหน่งที่อาจทำให้เกิดการทับซ้อนและเปลี่ยนแปลง หากคุณใช้การกำหนดตำแหน่งแบบสัมบูรณ์เพื่อจัดเรียงองค์ประกอบ div ของเว็บไซต์ของคุณนั่นก็เป็นองค์ประกอบที่ฟรีสำหรับทุกคนองค์ประกอบใด ๆ สามารถซ้อนทับองค์ประกอบอื่น ๆ บนหน้าเว็บได้ ดังนั้นหากคุณมีชุด A กว้าง 100 พิกเซลและ 15 พิกเซลจากด้านบนและด้านซ้ายของหน้า Div B จะต้องมีอย่างน้อย 115 พิกเซลทางด้านซ้ายเพื่อไม่ให้เหลื่อมซ้อน A คุณสามารถระบุตำแหน่งจาก ด้านบนหรือด้านล่างและจากทางขวาหรือซ้าย

3

ตั้ง div ที่มีความกว้างเฉพาะและซ่อนโอเวอร์โฟลว์ วิธีนี้จะป้องกันไม่ให้ div มีขนาดเกินขนาดที่กำหนดและป้องกันไม่ให้เนื้อหาหกล้น ตัวอย่างเช่นหาก div A ไม่มีความกว้างที่กำหนดไว้และคุณวางภาพขนาดใหญ่ไว้ div จะขยายโดยอัตโนมัติเพื่อให้เหมาะสมกับภาพ หากคุณตั้งค่าความกว้างรูปภาพจะยังคงแสดงเกินขอบของ div แต่ div จะไม่ขยายออก หากคุณซ่อนโอเวอร์โฟลว์ภาพจะแสดงภายในขอบเขตของ div เท่านั้นและจะไม่ขยายองค์ประกอบ ตัวอย่างเช่นหากต้องการตั้งค่า div A ให้มีความกว้าง 200 พิกเซลและไม่ล้นคุณควรใช้รหัสสไตล์นี้:

a {width: 200px; ล้น: ซ่อนอยู่; }

4

ใช้ตัวเลือก "ลอย" เพื่อสแต็กกองกล่อง div แบบเคียงข้างกันโดยอัตโนมัติ ตัวอย่างเช่นคุณต้องการให้ div A ทำหน้าที่เป็น sidebar และ div B เพื่อเก็บเนื้อหาของคุณ - คุณสามารถลอยทั้ง divs ไปทางซ้ายจึงทำให้พวกมันอยู่ในแนวนอน องค์ประกอบ div ที่ลอยอยู่จะไม่ทับซ้อนกัน ตัวอย่างขององค์ประกอบสององค์ประกอบที่มีลักษณะดังนี้:

a {width: 150px; ลอย: ซ้าย; }

b {width: 400px; ลอย: ซ้าย; }

เคล็ดลับ

• หากคุณใช้ Firefox คุณสามารถคลิกขวาที่กล่องและเลือก "ตรวจสอบองค์ประกอบ" สิ่งนี้ช่วยให้คุณเห็นภาพของแต่ละองค์ประกอบที่สามารถช่วยคุณระบุปัญหาที่ยุ่งยากเป็นพิเศษได้
• คุณสามารถตั้งค่าโอเวอร์โฟลว์เพื่อซ่อนเฉพาะบนแกน x หรือ y โดยใช้ "overflow-x" หรือ "overflow-y"