จัดตำแหน่งด้วย float and clear
May 6th
การวางตำแหน่ง layout ของ div แต่ละอัน เรามักจะใช้ property float และ clear เป็นประจำ ทำให้เราวางตำแหน่งได้อิสระมากขึ้น ในกรณี ที่ต้องการให้มีหลาย คอลัมภ์ ใน 1 หน้า
float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้มันอยู่ชิดด้านซ้าย ก็ใส่ float:left ถ้าชิดขวาใส่ float:right
ส่วน clear นั้น clear:left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย , clear:right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา,ที่มักใช้เป็นประจำคือ clear:both คือ ไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักจะใช้กับส่วน footer
จากโค้ด css
<style type=”text/css”>
#col-one{width:300px; height:200px; background:#666666}
.no1{width:100px; height:100px; background:#FFCC00;}
.no2{width:100px; height:100px; background:#99CC00;}
</style>
และ html ดังนี้
<div id=”col-one”>
?????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
</div>
จะได้ กล่องเรียงกันลงมา แบบนี้
เราจะเพิ่ม float:left; เข้าไปที่ .no1 และ .no2 จะได้เป็น
.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:left;}
ทำให้ div no1 นั้นชิดซ้าย และ no2 ก็ตามขึ้นมาด้วย
no1- left, no2 – right
.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:right;}
จะได้
สมมติว่า เรายังไม่รู้ว่าเนื้อหา ใน col-one นั้นจะมีเท่าไร ถ้ามีมาก ส่วนพื้นหลังสีดำ ก็ควรจะยืดลงมามาก ถ้ามีน้อยก็ควรจะหดสั้นลงให้พอดีกับเนื้อหา ตอนนี้เรากำหนดไว้ที่ height:200px; เราจะลบ property นี้ออก จะเป็น
#col-one{width:300px;background:#666666}
จะได้ผลดังนี้
จะเห็นว่า Fx จะไม่ทำแบ็คกราวน์ยืดลงมาตามสิ่งที่มีอยู่ข้างใน แต่ IE6 ทำ ส่วน opera netscape ทำเหมือน Fx
วิธีทำ cross browser สำหรับกรณีแบบนี้ คือ ใช้ class clear-all
.clear-all{clear:both; line-height:0; height:0;}
คลาสนี้ ควรจะเป็นคลาสที่มีอยู่ในไฟล์ .css ทุกครั้งที่มีการใช้ float จะต้องมีการ clear เสมอ เราจะใส่ class นี้ ใน tag <br> หรือ div จะได้เป็น html ดังนี้
<div id=”col-one”>
??????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
??????? <br class=”clear-all”>
</div>ถ้าใส่ในรูป div จะได้
<div id=”col-one”>
??????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
??????? <div class=”clear-all”></div>
</div>
ก็จะทำให้ ส่วนพื้นหลังสีดำยืดลงมา เหมือนในรูปของ IE6 ถ้าเมื่อไรที่มีวัตถุลอยขึ้นไป ไม่ตรงตำแหน่งที่วางไว้ หรือส่วนแบ็คกราวน์ ไม่ยอมยืดลงมา ก็ให้สังเกตที่ตัว float และ clear อาจมีการ float ไม่ถูกต้อง หรือ อาจมีการ clear ไม่ถูกที่ อย่างใดอย่างหนึ่ง
ภาพตัวอย่างการ layout ด้วย float และ clear
ตำแหน่งของ html จะเรียงจากบนลงล่างซ้ายไปขวา ดังนี้
<div id=”header”></div>
<div id=”green”></div>
<div id=”yellow”>
??????? <div id=”pink”></div>
????????<div id=”sky”></div>
??????? <br class=”clear-all”>
??????? <div id=”grey”></div>
</div>
<div id=”footer”></div>
ส่วนของ css ที่กำหนดความกว้างสูง และ สี ลองไปเติมกันดูครับ
ชอบบทนี้จัง ดูเหมือนว่า CSS ก็ไม่ยากเท่าไหร่แฮะ ไว้จะลองไปเขียนดูนะครับ ;)
เยี่ยมมากครับ ชัดเจน เข้าใจง่าย
css for dummiesเลยครับเข้าใจง่ายมาก
เข้าใจง่ายมากเลยค่ะ :d เยี่ยมเลย
ขอบคุณครับ :)>-
ขอบคุงมากเลยครับ ผู้ปลดปล่อย:d
ต้องการหาโหลดโปรแกรม CSS คะ มีที่ไหนให้โหลดได้บ้าง รบกวนช่วยแนะนำด้วยนะคะ
ขอบคุณค่า
ขอบคุณสำหรับบทความดีๆ ครับ
เยี่ยมมากเลยครับ :)>-
ขอบคุณสำหรับความรู้ดีๆครับ เมื่อก่อนเขียนใช้แต่ table แต่ตอนนี้จะเปลี่ยนเป็น table less แทน อ่านบทความนี้ แจ่มเลยครับ :d
สุดยอดอ่านแล้วเข้าใจเลย
เขียนอ่านได้เข้าใจง่ายดีคับ
It’s very useful. I use it every time doing the web.
กระจ่างแจ้ง แจ่มแจ๋ว จริงๆ ครับ:)
Thank you for good information
ความรู้แบบนี้ชอบจริงๆ
ชอบอีกแล้วบทความนี้
ตามมาอ่านแม้ว่าจะดึกมากแล้ว ง่วงมากๆ แต่อยากได้ “ของดี” ก่อนนอน
ขอบคุณมากนะครับ
วิท (http://www.tutorpoint.net)
ชัดเจนมากเลย ขอบคุณมากๆ
สุดยอดมากๆ ครับ ทำเรื่องยากให้เป็นเรื่องง่ายแท้ๆ
ขอบคุณมากมายครับสำหรับการแบ่งปันความรู้
อยากรบกวนเรียนถามครับคือผมอยากให้รูปภาพ
อยู่ทางด้ายซ้ายบน และข้อความอยู่ทางขวาของรูปภาพ พอเลยรูปภาพไปแล้วก้มีข้อความใด้รูปภาพอีก คล้าย ๆ เราพิมพ์เอกสารใน word นะครับ
พอดีผมลองทำตามแล้วข้อความมันจะไปอยู่ข้างใต้รูปภาพตลอดเลยครับ จัดหน้าไม่ได้
ขอบพระคุณครับ:d
พยายามทำความเข้าใจอยู่ค่ะ ยังไง สำหรับเรามันก็ยังยากอยู่ ^_^ ‘
ขอนั่งดูก่อนซัก 20 รอบ
เข้าใน Float ครับแต่ก็พึ่งใช้ Clear เป็นนี่แหล่ะ ขอบคุณมากครับ
แจ่มเลย…หามาตั้งนาน ถ้าทำไม่ได้จะมาถามนะครับ อิอิ
ทำให้ CSS ง่ายขึ้น เยอะ ครับ ^^
ขอบคุณครับ css เป็นเรื่องง่ายไปเลย
เจ๋ง ไม่ต้องสร้างตารางสำหรับจัดวางเลย
ขอบคุณครับ
ชอบมาก
ขอบคุณครับ ชอบบทความนี้จังครับ
เขียนได้ดีมากคับ ขอบคุณคับ:)>-
ขอบคุณมากอ่านทีเดียวเข้าใจเลย อ่านมาหลายเว็บล่ะ อันนี้เยี่ยมเลยครับ ขอบคุณที่แชร์ความรู้นะครับ
อธิบายได้เยี่ยม แหม…ของเขาดีจิงๆ