สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น
จากที่ได้เคยลองถามไถ่พรดู ก็ได้รู้ว่าสาเหตุนี้มันไม่ได้เกิดที่เราเขียนอะไรผิดครับแต่มันเป็น bugs ของเจ้า CSS นั่นเอง ซึ่งวิธีแก้นั้น เท่าที่ทุกคนทราบวิธีพื้นฐานเลยก็คือเราต้องสร้าง style ขึ้นมาอีกหนึ่งตัวเพื่อเอาไว้เคลียร์โดยเฉพาะเลย ซึ่งทำกันเช่นนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#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 วิธีแก้ปัญหาทำดังนี้
|
1 2 3 4 5 6 7 8 |
#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; ซะเลย
วิธีที่ชัวร์ก็ต้องเขียนออกมาแบบนี้ล่ะครับ
|
1 2 3 4 5 6 7 |
#container { width: 100px; margin: 0 auto; border: 1px solid black; overflow: hidden; } |
หวังว่าคงเป็นประโยชน์ และ ง่ายต่อการนำไปประยุกต์ใช้ครับ
เจอกันใหม่ครับ radiz
โอ้ววเพิ่มขึ้นอีกบันทัดเดียวก้อแจ๋วเลยยยยงมตั้งนานTOT
แหล่มเลย ใครไปดูหนังเรื่อง ตั๊ดสู้ฟุด ม่าง ๆ
ยังงง ๆ อยู่ครับ แต่ก็ขอบคุณที่แนะนำทิปดี ๆ อีกหน่อยเก่งกว่านี้ ผมคงเข้าใจได้
แหล่มเลย ขอบคุณkrub
เดี้ยมครับ (ดี+เยี่ยม)
เด็ดจิงๆ เลยครับ ขอบคุณครับ สำหรับความรู้ที่ทำให้ รอยยักในสมองเพิ่มขึ้น
แอร๊ยยย เคยเจอมาก่อนแทบอ๊วก ขอบพระคุณนะคร้าบบบ
ไม่ทราบว่าจะไปถามที่หัวข้อไหน ขอถามที่นี่ละกันนะครับ
อยากทราบว่ามีวิธีทำให้ สีพื้นหลังโปรงแสง ได้มั้ยครับ
ประมาณว่า Opacity ประมาณนี้อะครับ
รบกวนทีนะครับ
ขอบคุณครับ ชี้ทางสว่างเลย งมมาทั้งวันและเนี่ย