css layout กับการใช้ overflow และ float

โดย เมื่อ 2007-08-21 10:37:17 ดูทั้งหมด 527 ครั้ง

จากที่ได้เคยลองถามไถ่พรดู ก็ได้รู้ว่าสาเหตุนี้มันไม่ได้เกิดที่เราเขียนอะไรผิดครับแต่มันเป็น bugs ของเจ้า CSS นั่นเอง ซึ่งวิธีแก้นั้น เท่าที่ทุกคนทราบวิธีพื้นฐานเลยก็คือเราต้องสร้าง style ขึ้นมาอีกหนึ่งตัวเพื่อเอาไว้เคลียร์โดยเฉพาะเลย ซึ่งทำกันเช่นนี้

#container {: width: 100px;; margin: 0 auto;; border: 1px solid black;
}
.left {: width: 45px;; float: left;
}
.right {: width: 50px;; float: right;
}
.clear {: clear: both;
}

จะเห็นว่าเมื่อเรามีการสั่ง float เสร็จทั้งสองอย่างแล้วเราต้องมี element อีกหนึ่งตัวเรียก class ที่ชื่อว่า clear มาเพื่อเคลียร์ float ของเจ้า #container ที่มันเกิด bug ให้มันหายไปให้มันยืดตาม content ที่มีอยู่ใน left และ right แต่เคยรู้หรือไม่ว่าเราสามารถแก้ปัญหานี้ได้โดยกำหนดคุณลักษณะบางอย่างให้เจ้าตัวที่เป็นcontainer ได้เลยซึ่งก็คือ overflow: auto; นั่นเอง วิธีนี้ถูกโพสขึ้นครั้งแรกโดย Alex Walker โดยเจ้าตัวเองก็เครดิตให้กับ Paul O’Brien วิธีแก้ปัญหาทำดังนี้

#container {: width: 100px;; margin: 0 auto;; border: 1px solid black;; overflow: auto;
}

จะเห็นว่าเราเพิ่ม overflow: auto; เข้าไป ลองนำ test ดูครับเจ้า container จะยืดตาม content ของ left กับ right โดยอัตโนมัติโดยที่ไม่ต้องใช้ element อีกตัวเรียก .clear เข้ามาล้าง float ที่ค้างอยู่ แต่วิธีนี้อาจจจะมีปัญหาแตกต่างกันในบาง Browser เช่น บางเบราเซอร์ต้องมีการกำหนดค่าอย่างใดอย่างหนึ่งนะครับระหว่าง width หรือ height หรือจำเป็นต้องกำหนดทั้งสองอย่างนะครับ ในกรณีนี้มีบางครั้งที่ความสูง หรือ ความกว้างมันเกินกว่าที่เรากำหนดแล้วมันทำให้เกิด scrollbar ขึ้นโดยอัตโนมัติ หรือเจ้า scrollbar นี่จะแสดงตัวขึ้นมาเองเลยใน IE5 (Mac) วิธีแก้ปัญหาก็คือ

กำหนดความกว้างซะ
ต้องแน่ใจว่าเจ้าตัวที่คุณต้องการ float นั่นน่ะ ไม่มีการ overlap กับเจ้าที่เป็น container
เปลี่ยน overflow: auto; เป็น overflow: hidden; ซะเลย

วิธีที่ชัวร์ก็ต้องเขียนออกมาแบบนี้ล่ะครับ

#container {: width: 100px;; margin: 0 auto;; border: 1px solid black;; overflow: hidden;
}

หวังว่าคงเป็นประโยชน์ และ ง่ายต่อการนำไปประยุกต์ใช้ครับ

เจอกันใหม่ครับ radiz

- ยังไม่มีความคิดเห็น
- แสดงความคิดเห็นกับ : css layout กับการใช้ overflow และ float
About Author:

Tags:

เนื้อหาที่เกี่ยวข้อง

หรือกำลังสนใจ

เชียงใหม่หนาวแล้ว

Unknown Version Unknown

Accessibility Links

css layout กับการใช้ overflow และ float

css layout กับการใช้ overflow และ float

About Author: