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