คุณสมบัติ CSS เป็นคุณสมบัติที่สำคัญมากสำหรับการจัดวาง ช่วยให้คุณสามารถวางตำแหน่งการออกแบบหน้าเว็บของคุณได้ตามที่คุณต้องการ แต่เพื่อที่จะใช้งานได้คุณต้องเข้าใจวิธีการทำงาน
ในสไตล์ชีตคุณสมบัติ CSS float จะมีลักษณะดังนี้:
ขวา {ลอย: ขวา; }
นี้บอกเบราว์เซอร์ว่าทุกอย่างกับชั้นของ "สิทธิ" ควรจะลอยไปทางด้านขวา
คุณจะกำหนดลักษณะดังนี้
class = "right" />
สิ่งที่คุณสามารถ Float กับทรัพย์สินลอย CSS?
คุณไม่สามารถลอยองค์ประกอบทุกอย่างในเว็บเพจได้ คุณสามารถวางองค์ประกอบระดับบล็อกเท่านั้น นี่เป็นองค์ประกอบที่ใช้พื้นที่ในหน้าเว็บเช่นภาพ () ย่อหน้า () ส่วนต่างๆ () และรายการ ()
องค์ประกอบอื่น ๆ ที่ส่งผลต่อข้อความ แต่ไม่ได้สร้างกล่องในเพจจะเรียกว่าองค์ประกอบแบบอินไลน์และไม่สามารถลอยตัวได้ เหล่านี้เป็นองค์ประกอบเช่น span (), ตัวแบ่งบรรทัด (), ความสำคัญ () หรือตัวเอียง ()
พวกเขาลอยอยู่ที่ไหน?
คุณสามารถลอยองค์ประกอบไปทางขวาหรือซ้ายได้ องค์ประกอบใด ๆ ที่ทำตามองค์ประกอบลอยจะไหลไปรอบ ๆ ส่วนที่ลอยอยู่อีกฟากหนึ่ง
ตัวอย่างเช่นถ้าฉันลอยภาพไปทางซ้ายข้อความหรือองค์ประกอบอื่น ๆ ที่ติดตามข้อมูลนี้จะไหลไปรอบ ๆ ไปทางขวา และถ้าฉันลอยภาพไปทางขวาข้อความหรือองค์ประกอบอื่น ๆ ที่ติดตามสิ่งนี้จะไหลไปรอบ ๆ ไปทางซ้าย ภาพที่วางอยู่ในบล็อกข้อความโดยไม่มีลักษณะลอยใด ๆ ที่ใช้กับรูปจะแสดงอย่างไรก็ตามเบราเซอร์จะถูกตั้งค่าให้แสดงภาพ โดยปกติจะมีบรรทัดแรกของข้อความต่อไปนี้ที่ด้านล่างของภาพ
พวกเขาจะลอยตัวได้ไกลแค่ไหน?
องค์ประกอบที่ลอยขึ้นจะเลื่อนไปทางซ้ายหรือขวาขององค์ประกอบคอนเทนเนอร์เท่าที่จะทำได้ ซึ่งส่งผลให้เกิดสถานการณ์ต่างๆขึ้นอยู่กับว่าคุณเขียนโค้ดไว้อย่างไร สำหรับตัวอย่างเหล่านี้ฉันจะลอยตัวเล็ก ๆ DIV องค์ประกอบทางด้านซ้าย:
- ถ้าองค์ประกอบ float ไม่มีความกว้างที่กำหนดไว้ล่วงหน้าจะใช้พื้นที่ว่างในแนวนอนเท่าที่จำเป็นและพร้อมใช้งานโดยไม่คำนึงถึง float หมายเหตุ: เบราว์เซอร์บางแห่งพยายามวางองค์ประกอบไว้ข้างๆองค์ประกอบที่ลอยตัวเมื่อความกว้างไม่ได้ถูกกำหนดไว้โดยปกติแล้วจะให้องค์ประกอบที่ไม่มีการลอยตัวเพียงเล็กน้อยเท่านั้น ดังนั้นคุณควรจะ กำหนดความกว้างเสมอ เกี่ยวกับองค์ประกอบลอย
- ถ้าองค์ประกอบคอนเทนเนอร์เป็นอิลิเมนต์ HTML แท็กลอย
DIVจะนั่งอยู่ที่ขอบซ้ายของหน้า - ถ้าองค์ประกอบคอนเทนเนอร์เป็นของตัวเองอยู่โดยสิ่งอื่นล่องลอย
DIVจะนั่งอยู่บนขอบซ้ายของภาชนะ - คุณสามารถรังองค์ประกอบลอยและที่อาจทำให้ลอยลอยขึ้นในที่ที่น่าแปลกใจ ตัวอย่างเช่น float นี้เป็น float ซ้าย
DIVด้านขวาลอยDIV. - องค์ประกอบลอยจะนั่งข้างกันถ้ามีห้องในภาชนะ ตัวอย่างเช่นคอนเทนเนอร์นี้มี 3 ขนาดกว้าง 100px
DIVองค์ประกอบลอยอยู่ในภาชนะที่กว้าง 400px
คุณยังสามารถใช้ลอยเพื่อสร้างเค้าโครงแกลเลอรีภาพ คุณใส่ภาพขนาดย่อแต่ละภาพ (ทำงานได้ดีที่สุดเมื่อมีขนาดเท่ากันทั้งหมด) ใน a 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 สำหรับเค้าโครง
เมื่อคุณเข้าใจว่า ลอย งานอสังหาริมทรัพย์คุณสามารถเริ่มต้นใช้งานเพื่อจัดวางหน้าเว็บของคุณ นี่คือขั้นตอนที่ฉันใช้เพื่อสร้างหน้าเว็บแบบลอย:
- ออกแบบเค้าโครง (บนกระดาษหรือในเครื่องมือกราฟิกหรือในหัวของฉัน)
- กำหนดส่วนของหน้าเว็บที่ต้องการ
- กำหนดความกว้างของภาชนะต่างๆและองค์ประกอบภายใน
- ลอยทุกอย่าง แม้องค์ประกอบคอนเทนเนอร์ภายนอกจะลอยไปทางซ้ายเพื่อให้ฉันทราบว่าจะอยู่ที่ใดในมุมมองเบราว์เซอร์พอร์ต
ตราบเท่าที่คุณทราบความกว้าง (เปอร์เซ็นต์ดี) ของส่วนรูปแบบคุณสามารถใช้ ลอย คุณสมบัติที่จะนำพวกเขาที่พวกเขาอยู่บนหน้า และสิ่งที่ดีคือคุณไม่ต้องกังวลเกี่ยวกับโมเดลกล่องที่แตกต่างกันสำหรับ Internet Explorer หรือ Firefox
