เกร็ด css อีกเกร็ด

Topic: 
 

คำสั่ง padding และ margin ของ css สามารถกำหนดเป็นเปอร์เซนต์ได้ เช่น

margin: 5%;

สามารถแก้ปัญหาบราวเซอร์ไม่รองรับ ได้โดยการกำหนดเป็น point แทน

บางครั้งที่เราต้องการแสดงผลเป็นหลายคอลัมน์ เราจะกำหนดความกว้างเป็นเปอร์เซนต์
เพื่อให้ความกว้างของคอลัมน์สามารถเปลี่ยนตามความกว้างของบราวเซอร์ได้อย่างเหมาะสม

ปัญหาอยู่ที่ถ้าเรากำหนด padding กับ margin เป็นจุดคงที่
เวลาที่ความกว้างของบราวเซอร์เปลี่ยน ค่าเปอร์เซนต์ของความกว้างคอลัมน์จะเพี้ยน
เนื่องจากค่า padding กับ margin ที่ถูกกำหนดไว้คงที่

ทางแก้คือ ต้องสร้าง division ใหม่มาครอบคอลัมน์เก่าไว้
แล้วยอมตัดใจให้ระยะ padding หรือ margin ใน division ใหม่เป็นคงที่

เช่น ไฟล์ css และ html เดิมเป็น

.sidebar-left {
  ...
  padding: 10px;
  width: 20%;
}
.center-column {
  ...
  margin-left: 21%;
  width: 80%;
}
<div class="sidebar-left">
  ...
<div>

แก้ใหม่เป็น

.sidebar-left {
  ...
  padding: 0px;
  width: 20%
}
.pad10 {
  padding: 10px;
}
.center-column {
  ...
  margin-left: 20%;
  width: 80%;
}

และ

<div class="sidebar-left">
  <div class="pad10">
    ...
  </div>
</div>

เพิ่มเติม

การแสดงผลตั้งแต่สองคอลัมน์ขึ้นไป ถ้าคอลัมน์หลักยาวกว่าคอลัมน์รอง จะไม่มีปัญหา แต่ถ้าคอลัมน์รอง ยาวกว่าคอลัมน์หลัก จะทำให้การแสดงผลใน IE เพี้ยน

แก้ปัญหาด้วยวิธีเดียวกัน คือ สร้าง division ที่มีพื้นหลังที่ต้องการมาครอบไว้

 

Syndicate

Subscribe to Syndicate

Who's online

There are currently 0 users online.