องค์ประกอบระดับบล็อกในเอกสาร HTML (เช่นหน้าเว็บ) จะปรากฏตามลำดับ ในการแก้ไขคำสั่งซื้อเพื่อให้หน้าดูน่าสนใจมากขึ้นหรือเพื่อปรับปรุงประโยชน์ให้ดีขึ้นคุณจะต้องห่อบล็อกรวมทั้งภาพเพื่อให้ข้อความของหน้านั้นไหลไปรอบ ๆ
ในแง่เว็บผลกระทบนี้เรียกว่า "ลอย" ภาพ สไตล์นี้สามารถทำได้ด้วยคุณสมบัติ CSS สำหรับ "float" คุณสมบัตินี้ช่วยให้ข้อความไหลไปทั่วภาพชิดซ้ายไปทางด้านขวา หรือรอบภาพชิดขวาไปทางด้านซ้าย
เริ่มต้นด้วย HTML
สิ่งแรกที่คุณต้องทำก็คือมี HTML ที่จะใช้งานได้ สำหรับตัวอย่างของเราเราจะเขียนย่อหน้าและเพิ่มภาพตอนต้นของย่อหน้า (ก่อนข้อความ แต่หลังจากเปิด
แท็ก) นี่คือสิ่งที่ HTML มาร์กอัปดูเหมือนว่า:
ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น
ตามค่าเริ่มต้นหน้าเว็บของเราจะแสดงพร้อมกับภาพเหนือข้อความเนื่องจากภาพเป็นองค์ประกอบระดับบล็อกใน HTML ซึ่งหมายความว่าเบราว์เซอร์จะแสดงตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบรูปภาพตามค่าเริ่มต้น เราจะเปลี่ยนรูปลักษณ์เริ่มต้นนี้โดยเปลี่ยนเป็น CSS อันดับแรกเราจะเพิ่มค่าของคลาสลงในอิลิเมนต์รูปภาพของเรา ชั้นเรียนดังกล่าวจะทำหน้าที่เป็น "เบ็ด" ที่เราจะใช้ใน CSS ของเราในภายหลัง
ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น
โปรดสังเกตว่า "ซ้าย" ชั้นนี้ไม่ทำอะไรเลยด้วยตัวเอง เพื่อให้เราบรรลุรูปแบบที่ต้องการเราจำเป็นต้องใช้ CSS ต่อไป
สไตล์ CSS
ด้วย HTML ของเราในสถานที่ (รวมถึงแอตทริบิวต์ class ของ "left") เราสามารถเปลี่ยนเป็น CSS ได้แล้ว เราจะเพิ่มกฎลงในสไตล์ชีตของเราซึ่งจะลอยรูปภาพนั้นและเพิ่มช่องว่างเล็ก ๆ ด้านข้างเพื่อให้ข้อความที่ห่อหุ้มไว้รอบ ๆ ภาพจะไม่กระทบกับภาพอย่างใกล้ชิดเกินไป นี่คือ CSS ที่คุณอาจเขียน:
.ซ้าย { ลอย: ซ้าย; padding: 0 20px 20px 0;}
สไตล์นี้จะลอยภาพไปทางซ้ายและเพิ่มช่องว่างเล็กน้อย (ใช้ชวเลข CSS บางส่วน) ทางด้านขวาและด้านล่างของภาพ หากคุณตรวจสอบหน้าเว็บที่มี HTML นี้ในเบราว์เซอร์ภาพจะถูกจัดชิดกับด้านซ้ายและข้อความของย่อหน้าจะปรากฏทางด้านขวาด้วยระยะห่างที่เหมาะสมระหว่างทั้งสอง โปรดสังเกตว่าค่าของ "ซ้าย" ของชั้นเรียนที่เราใช้คือ arbitrary เราอาจเรียกได้ว่าอะไรเพราะคำว่า "ซ้าย" ไม่ทำอะไรเลยด้วยตัวเอง สิ่งที่คุณใช้ต้องมีแอตทริบิวต์ class ใน HTML ที่ทำงานกับสไตล์ CSS จริงที่กำหนดการเปลี่ยนแปลงภาพที่คุณต้องการทำ วิธีนี้ให้องค์ประกอบรูปภาพเป็นแอตทริบิวต์คลาสและใช้สไตล์ CSS ทั่วไปที่ลอยองค์ประกอบเป็นเพียงวิธีหนึ่งที่ทำให้รูปลักษณ์ "ชิดซ้าย" นี้สามารถทำได้ นอกจากนี้คุณยังสามารถนำค่าของชั้นเรียนออกจากรูปภาพและกำหนดสไตล์ด้วย CSS โดยการเขียนตัวเลือกที่เจาะจงมากขึ้น ตัวอย่างเช่นลองดูตัวอย่างที่ซึ่งภาพนั้นอยู่ภายในส่วนที่มีค่าคลาส "main-content" ในการจัดรูปแบบภาพนี้คุณสามารถเขียน CSS นี้ได้: เนื้อหาหลัก img { ลอย: ซ้าย; padding: 0 20px 20px 0;}
ในภาพจำลองนี้ภาพของเราจะเรียงชิดกันไปทางซ้ายโดยมีข้อความลอยอยู่รอบ ๆ เหมือนก่อน แต่เราไม่จำเป็นต้องเพิ่มค่าระดับพิเศษลงในมาร์กอัพของเรา การทำเช่นนี้ในระดับที่สามารถช่วยในการสร้างไฟล์ HTML ขนาดเล็กซึ่งจะง่ายต่อการจัดการและยังสามารถช่วยปรับปรุงประสิทธิภาพได้ สุดท้ายคุณสามารถเพิ่มรูปแบบโดยตรงลงในมาร์กอัป HTML เช่นนี้
วิธีนี้เรียกว่า "รูปแบบอินไลน์" ไม่เหมาะเพราะมันรวมลักษณะขององค์ประกอบที่มีมาร์กอัปมาร์กอัป แนวทางปฏิบัติที่ดีที่สุดในเว็บกำหนดว่าสไตล์และโครงสร้างของหน้าควรแยกออกจากกัน การแบ่งแยกนี้เป็นประโยชน์อย่างยิ่งเมื่อหน้าเว็บของคุณต้องการเปลี่ยนเค้าโครงและมองหาหน้าจอและอุปกรณ์ต่างๆที่มีเว็บไซต์ตอบสนอง การมีสไตล์ของหน้าเว็บใน HTML จะทำให้การเขียนคำที่สื่อมีความซับซ้อนมากขึ้นซึ่งจะปรับรูปลักษณ์ของเว็บไซต์ของคุณตามที่ต้องการสำหรับหน้าจอที่ต่างกัน ทางเลือกเพื่อให้บรรลุลักษณะเหล่านี้
ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น หลีกเลี่ยงรูปแบบอินไลน์
ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น
