Tag: float

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

.floatbox {	
float: left;	
width: 100px; 	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ

Floatting หรือการจับ element(s) ให้อยู่ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง ด้วยคำสั่ง float: left;, float: right; และ float: none;

ในการทำเว็บแบบ tableless นั่น การใช้ float เพื่อควบคุม div tag เป็นเรื่องสำคัญอย่างมาก ในการวางเลเอ๊าท์ให้กับหน้าเว็บเพจ เช่นการวางหน้าเว็บแบบ 3 คอลัมน์ โดยการสั่ง div tags เป็น float: left; ทั้งหมด ซึ่งถ้าหากเราต้องการจัดกลางหน้าเว็บ ด้วยการให้ div tag ซึ่งเป็น ตัวหลัก ครอบทั้ง 3 อันนี้ไว้ ต้องให้ค่า div หลักอันนั้นมี float เป็น none เป็นต้น

มาดูตัวอย่างการใช้ floats กับ div tags กันครับ ซึ่งมีข้อแม้เล็กๆ น้อยๆ ว่า กรณีที่ท่านได้ให้ค่า float ต่อ element(s) ใดๆ แล้ว ควร กำหนดความกว้างให้ element(s) เข้าไปด้วยนั่นเองครับ