รหัส HTML เพื่อตัดข้อความรอบรูปภาพ

ต้องการรหัสเพื่อตัดข้อความรอบรูปภาพหรือไม่ โดยปกติเมื่อคุณสร้างหน้า HTML ทุกอย่างจะไหลเป็นเส้นตรง ซึ่งหมายถึงบล็อกหนึ่งต่อจากกันโดยตรง โพสต์ก่อนหน้าของฉันทั้งหมดเป็นตัวอย่างของสิ่งนี้ เช่น ข้อความ รูปภาพ จากนั้นข้อความ ฯลฯ

บางครั้งคุณอาจต้องการรวมข้อความไว้ข้างรูปภาพแทนด้านล่าง สิ่งนี้เรียกว่าการตัดข้อความรอบรูปภาพ จริงๆ แล้ว การตัดข้อความโดยใช้ HTML นั้นค่อนข้างง่าย โปรดทราบว่าคุณไม่จำเป็นต้องใช้ CSS เพื่อตัดข้อความ

อย่างไรก็ตาม วันนี้ W3C แนะนำให้ใช้ CSS แทน HTML สำหรับงานประเภทนี้ ฉันจะพูดถึงทั้งสองวิธีด้านล่าง แต่ถ้าทำได้ ควรใช้ CSS เนื่องจากสามารถปรับให้เข้ากับการออกแบบเว็บไซต์ที่ตอบสนองได้ดีกว่า

ตัดข้อความรอบรูปภาพโดยใช้ HTML

รหัส HTML เพื่อตัดข้อความรอบรูปภาพ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagitis. Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur โมเลสตี้ posuere laoreet. Ut pellentesque nunc ใน lorem egestas non imperdiet enim congue

เพื่อให้ข้อความถูกครอบตัดทางด้านขวาของรูปภาพ คุณต้องจัดแนวรูปภาพไปทางซ้าย:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

หากคุณต้องการให้ข้อความปรากฏทางด้านซ้ายและรูปภาพปรากฏที่ด้านขวาสุด เพียงเปลี่ยนพารามิเตอร์การจัดตำแหน่งเป็น “ขวา”

รหัส HTML เพื่อตัดข้อความรอบรูปภาพ

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

แค่นั้นแหละ! ค่อนข้างง่ายใช่มั้ย? ครั้งเดียวที่คุณต้องการใช้ CSS คือถ้าคุณต้องการเพิ่มระยะขอบให้กับรูปภาพ เพื่อให้มีช่องว่างระหว่างข้อความและรูปภาพ

คุณสามารถเพิ่มระยะขอบให้กับรูปภาพได้โดยใช้โค้ดการจัดสไตล์ CSS ต่อไปนี้:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

โค้ดด้านบนใช้องค์ประกอบ MARGIN CSS เพื่อเพิ่มช่องว่าง 10 พิกเซลทางด้านขวาของภาพ เนื่องจากเราจัดแนวรูปภาพไปทางซ้าย เราจึงต้องการเพิ่มช่องว่างทางด้านขวา

โดยทั่วไป ตัวเลขสี่ตัวแสดงถึง TOP RIGHT BOTTOM LEFT ดังนั้น หากคุณต้องการเพิ่มช่องว่างสีขาวให้กับรูปภาพที่จัดชิดขวา ให้ทำดังนี้:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

ดังนั้นมันจึงค่อนข้างง่ายที่จะใช้ HTML เพื่อทำงานนี้ แต่อีกครั้ง มันอาจทำงานได้ไม่ดีสำหรับไซต์ที่ตอบสนอง

ตัดข้อความรอบรูปภาพโดยใช้ CSS

วิธีที่ดีกว่าในการตัดข้อความรอบรูปภาพคือการใช้ CSS ช่วยให้คุณควบคุมการจัดตำแหน่งขององค์ประกอบต่างๆ ได้ละเอียดยิ่งขึ้น และทำงานได้ดีขึ้นด้วยมาตรฐานการเข้ารหัสที่ทันสมัย

<img src="IMAGE URL" alt="A photo" class="left" />

แม้ว่าฉันจะรวม CSS ลงในแท็กรูปภาพในตัวอย่าง HTML โดยตรง คุณก็ไม่ควรทำเช่นนั้นอีกต่อไปเช่นกัน คุณควรมีไฟล์แยกต่างหากที่เรียกว่าสไตล์ชีตซึ่งมีโค้ด CSS ทั้งหมดของคุณ

ในแท็ก IMG คุณเพียงแค่กำหนดคลาสให้กับแท็กและตั้งชื่อให้กับแท็กนั้น ในตัวอย่างของฉัน ฉันตั้งชื่อคลาสว่า ซ้าย . ในสไตล์ชีตของฉัน สิ่งที่ฉันต้องทำคือเพิ่มโค้ดต่อไปนี้:

.left {
 float: left;
 padding: 0 10px 0 0;}

อย่างที่คุณเห็น ฉันได้เพิ่มช่องว่างภายใน 10px ที่ด้านขวาของรูปภาพที่จัดชิดซ้าย ฉันยังใช้คุณสมบัติ float เพื่อย้ายรูปภาพออกจากโฟลว์ปกติของเอกสารและวางไว้ทางด้านซ้ายของคอนเทนเนอร์หลัก

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