CSS การจัดตำแหน่งในแนวนอน (Horizontal แหน่ง)
ใน CSS มีหลายองค์ประกอบคุณสมบัติสำหรับการจัดตำแหน่งในแนวนอน
ตําแหน่งองค์ประกอบของบล็อก
บล็อกองค์ประกอบเป็นองค์ประกอบการขึ้นเต็มความกว้างของด้านหน้าและด้านหลังมีการแบ่งบรรทัด
ตัวอย่างขององค์ประกอบของบล็อก:
- <h1>
- <p>
- <div>
การจัดตำแหน่งข้อความให้ดู ข้อความ CSS ส่วน .
ในบทนี้เราจะแสดงวิธีการป้องกันการจัดตำแหน่งแนวนอนขององค์ประกอบรูปแบบ
ศูนย์ชิดขอบใช้ทรัพย์สิน
องค์ประกอบของบล็อกสามารถด้านซ้ายและอัตรากำไรที่เหมาะสมตั้ง "อัตโนมัติ" การจัดตำแหน่ง
หมายเหตุ: ใช้ในระยะขอบ IE8: คุณสมบัติอัตโนมัติไม่ทำงานเว้นแต่ DOCTYPE ประกาศ!
คุณสมบัติอัตรากำไรขั้นต้นสามารถแบ่งออกโดยพลการเข้าสู่การตั้งค่าด้านซ้ายและขอบขวาที่ได้รับมอบหมายโดยอัตโนมัติผลที่ได้คือการเกิดขึ้นขององค์ประกอบกลาง:
เคล็ดลับ: หากความกว้างเป็น 100% การจัดตำแหน่งไม่ได้มีประสิทธิภาพ
หมายเหตุ: IE5 มีอัตรากำไรขั้นต้นในการประมวลผลบล็อกองค์ประกอบข้อผิดพลาดที่จะทำให้ตัวอย่างข้างต้นการทำงานใน IE5 เราต้องเพิ่มรหัสบางอย่างเพิ่มเติม ตัวอย่าง
โดยใช้ตำแหน่งของสถานที่มีการตั้งค่าไปซ้ายชิดขวา
การจัดเรียงองค์ประกอบหนึ่งคือการใช้ตำแหน่งแน่นอน:
หมายเหตุ: ตำแหน่งแน่นอนมีอะไรจะทำอย่างไรกับการไหลของเอกสารเพื่อให้พวกเขาสามารถครอบคลุมองค์ประกอบอื่น ๆ บนหน้าเว็บ
ปัญหาความเข้ากัน crossbrowser
<p align ที่คล้ายกันเมื่อองค์ประกอบดังกล่าวเป็นอัตราที่กำหนดไว้ในสภาพแวดล้อม padding เป็นความคิดที่ดี นี้คือการหลีกเลี่ยงความแตกต่างของภาพในเบราว์เซอร์ที่แตกต่างกันIE8 และก่อนหน้านี้มีปัญหาเมื่อใช้ตำแหน่งสถานที่ให้บริการ ถ้าองค์ประกอบภาชนะ (ในกรณีนี้ <div class = "ภาชนะ">) ความกว้างที่ระบุ ,! ประกาศ DOCTYPE จะหายไป IE8 และรุ่นก่อนหน้าจะเพิ่มอัตรากำไร 17px ด้านขวา นี้น่าจะเป็นพื้นที่กลิ้งสำรอง เมื่อใช้ตำแหน่งสถานที่ตั้งเสมอในการประกาศถึง Doctype!
ตัวอย่าง
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
ลอง»
ใช้ทรัพย์สินลอยไปซ้ายจัดชิดขวา
ใช้ทรัพย์สินลอยเป็นหนึ่งในวิธีการองค์ประกอบการจัดตำแหน่ง:
ปัญหาความเข้ากัน crossbrowser
องค์ประกอบชิดเช่นนี้อัตรากำไรก่อนกำหนดองค์ประกอบและขยายเป็นความคิดที่ดี นี้คือการหลีกเลี่ยงความแตกต่างของภาพในเบราว์เซอร์ที่แตกต่างกัน
IE8 และก่อนหน้านี้มีปัญหาเมื่อใช้คุณสมบัติลอย ถ้าองค์ประกอบภาชนะ (ในกรณีนี้ <div class = "ภาชนะ">) ความกว้างที่ระบุ ,! ประกาศ DOCTYPE จะหายไป IE8 และรุ่นก่อนหน้าจะเพิ่มอัตรากำไร 17px ด้านขวา นี้น่าจะเป็นพื้นที่กลิ้งสำรอง เมื่อใช้คุณสมบัติลอยตั้งเสมอในการประกาศถึง Doctype!
ตัวอย่าง
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
ลอง»