การใช้คุณสมบัติ CSS float เพื่อออกแบบเค้าโครงหน้าเว็บ
คุณสมบัติ CSS เป็นคุณสมบัติที่สำคัญมากสำหรับการจัดวาง ช่วยให้คุณสามารถวางตำแหน่งการออกแบบหน้าเว็บของคุณได้ตามที่คุณต้องการ แต่เพื่อที่จะใช้งานได้คุณต้องเข้าใจวิธีการทำงาน
ในสไตล์ชีตคุณสมบัติ CSS float จะมีลักษณะดังนี้:
ขวา {ลอย: ขวา; }
นี้บอกเบราว์เซอร์ว่าทุกอย่างกับชั้นของ "สิทธิ" ควรจะลอยไปทางด้านขวา
คุณจะกำหนดลักษณะดังนี้
class = "right" />
สิ่งที่คุณสามารถ Float กับทรัพย์สินลอย CSS?
คุณไม่สามารถลอยองค์ประกอบทุกอย่างในเว็บเพจได้ คุณสามารถวางองค์ประกอบ ระดับบล็อก เท่านั้น นี่เป็นองค์ประกอบที่ใช้พื้นที่ในหน้าเว็บเช่นภาพ () ย่อหน้า () ส่วนต่างๆ () และรายการ ()
องค์ประกอบอื่น ๆ ที่ส่งผลต่อข้อความ แต่ไม่ได้สร้างกล่องในเพจจะเรียกว่า องค์ประกอบแบบอินไลน์ และไม่สามารถลอยตัวได้ เหล่านี้เป็นองค์ประกอบเช่น span (), ตัวแบ่งบรรทัด (), ความสำคัญ () หรือตัวเอียง ()
พวกเขาลอยอยู่ที่ไหน?
คุณสามารถลอยองค์ประกอบไปทางขวาหรือซ้ายได้ องค์ประกอบใด ๆ ที่ทำตามองค์ประกอบลอยจะไหลไปรอบ ๆ ส่วนที่ลอยอยู่อีกฟากหนึ่ง
ตัวอย่างเช่นถ้าฉันลอยภาพไปทางซ้ายข้อความหรือองค์ประกอบอื่น ๆ ที่ติดตามข้อมูลนี้จะไหลไปรอบ ๆ ไปทางขวา และถ้าฉันลอยภาพไปทางขวาข้อความหรือองค์ประกอบอื่น ๆ ที่ติดตามสิ่งนี้จะไหลไปรอบ ๆ ไปทางซ้าย ภาพที่วางอยู่ในบล็อกข้อความโดยไม่มีลักษณะลอยใด ๆ ที่ใช้กับรูปจะแสดงอย่างไรก็ตามเบราเซอร์จะถูกตั้งค่าให้แสดงภาพ
โดยปกติจะมีบรรทัดแรกของข้อความต่อไปนี้ที่ด้านล่างของภาพ
พวกเขาจะลอยตัวได้ไกลแค่ไหน?
องค์ประกอบที่ ลอยขึ้น จะเลื่อนไปทางซ้ายหรือขวาขององค์ประกอบคอนเทนเนอร์เท่าที่จะทำได้ ซึ่งส่งผลให้เกิดสถานการณ์ต่างๆขึ้นอยู่กับว่าคุณเขียนโค้ดไว้อย่างไร
สำหรับตัวอย่างเหล่านี้ฉันจะลอยองค์ประกอบ DIV เล็ก ๆ ไปทางซ้าย:
- ถ้าองค์ประกอบ float ไม่มีความกว้างที่กำหนดไว้ล่วงหน้าจะใช้พื้นที่ว่างในแนวนอนเท่าที่จำเป็นและพร้อมใช้งานโดยไม่คำนึงถึง float หมายเหตุ: เบราว์เซอร์บางแห่งพยายามวางองค์ประกอบไว้ข้างๆองค์ประกอบที่ลอยตัวเมื่อความกว้างไม่ได้ถูกกำหนดไว้โดยปกติแล้วจะให้องค์ประกอบที่ไม่มีการลอยตัวเพียงเล็กน้อยเท่านั้น ดังนั้นคุณจึงควร กำหนดความกว้างของ องค์ประกอบแบบ float
- หากองค์ประกอบคอนเทนเนอร์เป็นองค์ประกอบ HTML DIV แบบลอยจะนั่งอยู่ที่ขอบซ้ายของหน้า
- ถ้าองค์ประกอบคอนเทนเนอร์บรรจุอยู่ในสิ่งอื่นใด DIV แบบลอยจะนั่งอยู่ที่ขอบด้านซ้ายของคอนเทนเนอร์
- คุณสามารถรังองค์ประกอบลอยและที่อาจทำให้ลอยลอยขึ้นในที่ที่น่าแปลกใจ ตัวอย่างเช่น float นี้เป็น DIV แบบลอยซ้ายภายใน DIV แบบลอยขวา
- องค์ประกอบลอยจะนั่งข้างกันถ้ามีห้องในภาชนะ ตัวอย่างเช่นคอนเทนเนอร์นี้มีองค์ประกอบ DIV แบบกว้าง 100 แบบ 2 มิติที่ลอยอยู่ในคอนเทนเนอร์ขนาดกว้าง 400px
คุณยังสามารถใช้ลอยเพื่อสร้างเค้าโครงแกลเลอรีภาพ คุณใส่ภาพขนาดย่อแต่ละภาพ (ทำงานได้ดีที่สุดเมื่อมีขนาดเท่ากันทั้งหมด) ใน DIV พร้อมคำอธิบายภาพและวางองค์ประกอบ DIV ในคอนเทนเนอร์
ไม่ว่าหน้าต่างเบราเซอร์จะมีขนาดกว้างเท่าไรภาพขนาดย่อจะเรียงกันอย่างสม่ำเสมอ
การปิด Float
เมื่อคุณรู้วิธีทำให้องค์ประกอบลอยตัวคุณจำเป็นต้องทราบวิธีปิดเครื่องลอย คุณปิดการลอยด้วยคุณสมบัติที่ชัดเจนของ CSS คุณสามารถล้างลอยซ้ายลอยขวาหรือทั้งสอง:
ชัดเจน: ซ้าย;
ชัดเจน: ถูกต้อง;
ชัดเจน: ทั้งสอง;
องค์ประกอบใดก็ตามที่คุณตั้งค่า พร็อพเพอร์ตี้ที่ชัดเจน สำหรับจะปรากฏใต้องค์ประกอบที่ลอยอยู่ในทิศทางนั้น ตัวอย่างเช่นในตัวอย่างนี้สองย่อหน้าแรกของข้อความจะไม่ถูกล้าง แต่ที่สามคือ
เล่นด้วยค่าที่ชัดเจนขององค์ประกอบต่างๆในเอกสารของคุณเพื่อให้ได้ผลรูปแบบที่แตกต่างกัน
รูปแบบลอยที่น่าสนใจที่สุดชุดหนึ่งคือภาพชุดหนึ่งจากคอลัมน์ด้านขวาหรือด้านซ้ายถัดจากย่อหน้าของข้อความ แม้ว่าข้อความจะไม่ยาวพอที่จะเลื่อนผ่านภาพได้ แต่คุณสามารถใช้ภาพที่ชัดเจนในภาพทั้งหมดเพื่อให้แน่ใจว่าปรากฏในคอลัมน์แทนที่จะเป็นภาพถัดไป
HTML (ทำซ้ำย่อหน้านี้):
ความผิดพลาดที่เกิดขึ้นในการลอบวางเพลิง Cupidatat ไม่ใช่ Proident, ut labore และ dolore magna aliqua.
CSS (เพื่อลอยภาพไปทางซ้าย):
img.float {float: ซ้าย;
ความชัดเจน: ซ้าย;
margin: 5px;
}
และไปทางขวา:
img.float {float: right;
ความชัดเจน: ขวา;
margin: 5px;
}
การใช้ Floats สำหรับเค้าโครง
เมื่อคุณเข้าใจว่าคุณสมบัติของ float ทำงานได้อย่างไรคุณสามารถเริ่มใช้งานได้เพื่อวางหน้าเว็บของคุณ นี่คือขั้นตอนที่ฉันใช้เพื่อสร้างหน้าเว็บแบบลอย:
- ออกแบบเค้าโครง (บนกระดาษหรือในเครื่องมือกราฟิกหรือในหัวของฉัน)
- กำหนดส่วนของหน้าเว็บที่ต้องการ
- กำหนดความกว้างของภาชนะต่างๆและองค์ประกอบภายใน
- ลอยทุกอย่าง แม้องค์ประกอบคอนเทนเนอร์ภายนอกจะลอยไปทางซ้ายเพื่อให้ฉันทราบว่าจะอยู่ที่ใดในมุมมองเบราว์เซอร์พอร์ต
ตราบเท่าที่คุณทราบความกว้าง (เปอร์เซ็นต์ดี) ของส่วนรูปแบบของคุณคุณสามารถใช้คุณสมบัติ float เพื่อวางตำแหน่งไว้ในหน้าเว็บ และสิ่งที่ดีคือคุณไม่ต้องกังวลเกี่ยวกับโมเดลกล่องที่แตกต่างกันสำหรับ Internet Explorer หรือ Firefox