ต้องการรหัสเพื่อตัดข้อความรอบภาพหรือไม่? โดยปกติเมื่อคุณสร้างหน้า HTML ทุกอย่างจะไหลเป็นเส้นตรงซึ่งหมายถึงบล็อกหนึ่งหลังอีกโดยตรง ข้อความที่โพสต์ทั้งหมดของฉันก่อนหน้านี้เป็นตัวอย่างของข้อความนี้เช่นข้อความแล้วภาพข้อความแล้ว ฯลฯ
บางครั้งคุณอาจต้องการใส่ข้อความติดกับรูปภาพแทนที่จะเป็นด้านล่าง นี่เรียกว่าการตัดข้อความรอบรูปภาพ เป็นจริงค่อนข้างง่ายต่อการห่อข้อความโดยใช้ HTML โปรดทราบว่าคุณไม่จำเป็นต้องใช้ CSS เพื่อตัดข้อความ
อย่างไรก็ตามวันนี้ W3C แนะนำให้ใช้ CSS แทน HTML สำหรับงานประเภทนี้ ฉันจะกล่าวถึงทั้งสองวิธีด้านล่าง แต่ถ้าทำได้ดีกว่าการใช้ CSS เนื่องจากสามารถปรับเปลี่ยนการออกแบบเว็บไซต์ได้อย่างเหมาะสม
ตัดข้อความรอบรูปภาพโดยใช้ HTML
Lorem ipsum dolor sit amet, ข้อสังเกตที่เพิ่มขึ้น คำให้การของ Fusce gravida enim, ultrasonic quis ultrasions การขยายตัว Cum sociis natoque penatibus et magnis disurse montur, nascetur ridiculus mus Aliquam a felis vitae augue lobortis คำเบิกความ Curabitur molestie posuere laoreet.
ในการที่จะให้ข้อความห่อหุ้มไปตามด้านขวาของภาพคุณต้องจัดแนวภาพให้ชิดซ้าย:
หากคุณต้องการให้ข้อความปรากฎด้านซ้ายและภาพจะปรากฏทางขวาสุดเพียงแค่เปลี่ยนพารามิเตอร์ align เป็น "right"
Lorem ipsum dolor sit amet, ข้อมูลเพิ่มเติม คำให้การของ Fusce gravida enim, ultrasonic quis ultrasions การขยายตัว Cum sociis natoque penatibus et magnis disurse montur, nascetur ridiculus mus Aliquam a felis vitae augue lobortis คำเบิกความ Curabitur molestie posuere laoreet. Ut pellentesque nunc ใน lorem egestas ไม่ใช่ imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
นั่นแหล่ะ! ง่ายสวยใช่ไหม? เฉพาะเวลาที่คุณต้องการใช้ CSS ก็คือถ้าคุณต้องการเพิ่มระยะขอบให้กับรูปภาพเพื่อให้มีช่องว่างระหว่างข้อความกับภาพ
คุณสามารถเพิ่มระยะขอบลงในภาพโดยใช้ ตามโค้ดการออกแบบ CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
รหัสข้างต้นใช้องค์ประกอบ MARGIN CSS เพื่อเพิ่ม 10 ช่องว่างของช่องว่างทางด้านขวาของภาพ เนื่องจากเราจัดแนวภาพไว้ทางซ้ายเราจึงต้องการเพิ่มช่องว่างทางด้านขวา
ตัวเลขสี่หลักหมายถึง TOP RIGHT BOTTOM LEFT ดังนั้นถ้าคุณต้องการเพิ่มพื้นที่สีขาวให้กับภาพชิดขวาคุณจะทำดังนี้:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
ดังนั้นจึงค่อนข้างง่ายในการใช้ HTML เพื่อดำเนินการนี้ อีกครั้งอาจทำงานได้ไม่ดีสำหรับไซต์ที่ปรับเปลี่ยนตามข้อมูล
ตัดข้อความรอบรูปภาพโดยใช้ CSS
วิธีที่ดีกว่าในการตัดข้อความรอบรูปภาพคือการใช้ CSS จะช่วยให้คุณสามารถควบคุมตำแหน่งขององค์ประกอบได้ดีขึ้นและทำงานได้ดีขึ้นด้วยมาตรฐานการเข้ารหัสที่ทันสมัย
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
แม้ว่าฉันจะใส่ CSS ลงในแท็กรูปภาพโดยตรงในตัวอย่าง HTML ก็ตาม คุณไม่ควรทำอย่างนั้นอีกต่อไปด้วย แต่คุณควรมีไฟล์แยกต่างหากที่เรียกว่าสไตล์ชีทซึ่งเก็บโค้ด CSS ทั้งหมดของคุณ
ในแท็ก IMG คุณเพียงแค่กำหนดคลาสให้กับแท็กและตั้งชื่อให้ ในตัวอย่างของฉันฉันตั้งชื่อคลาส ซ้ายในสไตล์ชีตของฉันสิ่งที่ฉันต้องทำก็คือเพิ่มโค้ดต่อไปนี้:
.left {
float: left;
padding: 0 10px 0 0;}
ตามที่คุณเห็นฉันเพิ่ม 10px ในช่องว่างด้านขวาของภาพชิดซ้าย . ฉันยังใช้คุณสมบัติ float เพื่อย้ายภาพออกจากการไหลปกติของเอกสารและวางไว้ทางด้านซ้ายของคอนเทนเนอร์หลัก
ตามที่เห็นแล้วมีความสะอาดกว่าการเพิ่มโค้ดทั้งหมด ไปที่แท็ก IMG เอง นอกจากนี้ยังง่ายต่อการจัดการและคุณสามารถใช้คุณสมบัติ CSS ได้มากขึ้นเพื่อปรับแต่งรูปลักษณ์บนหน้าเว็บของคุณ หากคุณมีคำถามใด ๆ คุณสามารถแสดงความคิดเห็นได้ สนุก!