liquid

Tag: liquid

การเขียน Liquid Layouts 3 Columns

ผมค้างเอาไว้จากบทความก่อนหน้า เกี่ยวกับการเขียน CSS Layout แบบ เต็มหน้า ตอนนี้มาดูกันต่อว่า ถ้าจะทำเป็นแบบ สามคอลัมน์ต้องลดและเพิ่มตรงไหนบ้าง เพื่อที่จะจัดหน้าให้เข้าที่ได้ง่ายที่สุด

สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น

สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี

CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial