Float ตอนที่ 2

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

อย่างไร ไปดูตัวอย่างกันเลยดีกว่าครับ

ผมจะสร้าง divs มา 4 ตัว โดย div ที่ใช้เป็น ตัวหลักนั้นจะใช้ id ในการอ้างถึงและจัดรูปแบบ ส่วนอีก 3 อันที่เหลือใช้ class ในการกำหนดรูปแบบการแสดงผลครับ

Back to Top

8 Responses to Float ตอนที่ 2

  1. taggi

    ดีมากๆครับ บทความ กำลังสยสัยหลายเรื่องเลยพอเจอเว็บนี้ แล้วใช่เลย

    Reply

  2. MP3WizarD

    position:inherit ไว้ทำอะไรหรอครับ?

    Reply

  3. Goommy

    ผมก็ยังงงๆระหว่าง relative กับ inherit อยู่อะคับ รวมถึง absolute ด้วย คือเจ้า relative กับ inherit เนี่ยมันจะวัดจาก parent มันใช่มะคับ แล้ว absolute เนี่ย มันวัดจาก body ของเอกสาร

    ผมเข้าใจถูกปะเนี่ย??? :P

    Reply

  4. likhi1

    ชอบการทำรูปประกอบจัง……ชัดเจนดี….

    มองภาพออกเลย….

    Reply

  5. Artofid

    position:inherit; ในที่นี้มีค่าเท่ากับ position:relative;

    จริงๆ หมายถึงว่า มันจะเอาค่า position จาก parent ของมันมาใช้นั่นเอง ซึ่งตอนนี้ parent ของมันก็คือ #main คือ position:relative

    บางทีอาจจะไม่ต้องใส่ก็ได้ ผมก็ไม่ค่อยได้ใส่เท่าไหร่ อย่าง float;none; ก็เช่นเดียวกัน เพราะบางทีมันเป็นค่า default อยู่แล้วครับ

    Reply

  6. bukoilza

    ผมมาหาคำตอบ ขอบคุณครับ

    Reply

  7. daclubb

    คือผมว่า อย่างนี้มั้งคับ

     
    ถ้าเรากำหนด absolute ให้ element ใดๆ

     
    สามารถอ้างอิงตำแหน่งได้ 2 กรณี คือ

     
    1.หาก parent ของมันกำหนดเป็น relative มันจะอ้างจาก parent

     
    2.หาก parent ไม่มีการกำหนดเป็น relative มันจะอ้างค่าจาก ขอบของbrowser เลยคับไม่ขึ้นกับใคร

     

     
    ส่วนinherit ก็ไม่น่างงนะครับ เหมอืน parent มันไงครับ ถ้าparent เป็น absoluteมันก็เป็น absolute ถ้า parent เป็น relative มันก็เป็น relative แล้วถ้า parent เป็น inherit ขึ้นมาเราคงต้องไปดูปู่มัน(grand-parent)

     
    หะๆๆคือ ดูparent ของ parent อีกที

     

     

    Reply

  8. k2w

    ขยายเรื่องนี้กต้องไปอ่าน ทฤษฎี OOP แล้วจะเข้าใจครับ อิอิ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top