Float ตอนที่ 1

โดย พร อันทะ เมื่อ 2007-08-31 08:26:53 ดูทั้งหมด 599 ครั้ง

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

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

1. div tag 1 ชิ้น ให้ค่า float ต่างกัน 3 แบบ

CSS

#float1 {: width: 200px;; height: 200px;; position: relative;; float: none;; background: #CCCCCC;; margin: 0 auto;
}
#float2 {: width: 200px;; height: 200px;; position: relative;; float: left;; background: #FF9900;
}
#float3 {: width: 200px;; height: 200px;; position: relative;; float: right;; background: #0066CC;
}

XHTML

<div id="float1">: <h1>#float1 : float none</h1>
</div>
<div id="float2">: <h1>#float2 : float left</h1>
</div>
<div id="float3">: <h1>#float3 : float right</h1>
</div>

- ยังไม่มีความคิดเห็น
- แสดงความคิดเห็นกับ : Float ตอนที่ 1
About Author: พร อันทะ
- พร อันทะ

Tags:

css
float

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

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

แจ้งยกเลิกการปฐมนิเทศน์ วันอาทิตย์นี้ครับ

Unknown Version Unknown

Accessibility Links

Float ตอนที่ 1

Float ตอนที่ 1

About Author: พร อันทะ