HTML Code สำหรับ Wrap Text รอบรูปภาพ

ต้องการ Code ให้ Text ห่อหุ้มรูปภาพ? ปกติ HTML ไหลแบบ Linear (บล็อกต่อบล็อก) เช่น Text แล้ว Picture แล้ว Text

บางครั้งต้องการ Text ข้างรูปภาพ ไม่ใช่ใต้รูป เรียกว่า "Wrap text around image" ทำได้ง่ายด้วย HTML ไม่จำเป็นต้องใช้ CSS

แต่ W3C แนะนำใช้ CSS แทน HTML สำหรับงานนี้ จะกล่าวทั้ง 2 วิธี แต่ CSS ดีกว่า เพราะรองรับ Responsive Design

Wrap Text รอบรูปภาพด้วย HTML

HTML Code สำหรับ Wrap Text รอบรูปภาพ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

เพื่อให้ Text ห่อขวาของรูป ให้ Align รูปไปซ้าย:

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

หากต้องการ Text อยู่ซ้าย รูปอยู่ขวา ให้ Align="right"

HTML Code สำหรับ Wrap Text รอบรูปภาพ

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

ง่ายใช่ไหม? ใช้ CSS เมื่อต้องการ Margin ระหว่าง Text และรูป

เพิ่ม Margin ด้วย CSS Inline:

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

โค้ดด้านบนเพิ่ม Whitespace 10px ด้านขวาของรูป (Align left) Margin 4 ค่า = TOP RIGHT BOTTOM LEFT หาก Align right ต้องการ Whitespace ซ้าย:

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

HTML ทำได้ง่าย แต่อาจไม่ค่อยเหมาะกับ Responsive Sites

Wrap Text รอบรูปภาพด้วย CSS

วิธีที่ดีกว่า: ใช้ CSS ควบคุมตำแหน่งละเอียด รองรับ Modern Standards ดีกว่า

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

แม้ตัวอย่าง HTML ข้างบนใส่ CSS Inline ใน IMG Tag แต่จริงๆ ไม่ควรทำแล้ว ควรแยก Stylesheet

ใน IMG Tag ใส่ Class ชื่อ left ใน Stylesheet เพิ่ม:

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

เพิ่ม Padding 10px ด้านขวาของรูป Align Left ใช้ Float ส่งรูปออกจาก Normal Flow ไปซ้าย Container

โค้ดสะอาดกว่า จัดการง่าย และใช้ CSS Properties เพิ่มได้อีกมาก หากมีคำถาม คอมเมนต์ได้ ขอให้สนุกกับการใช้งาน!