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

2019

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

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

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

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

Lorem ipsum dolor sit amet, consetetur adipiscing elit. ถ้าพูดถึงเรื่องนี้, คำถามที่พบบ่อยคือสิ่งที่ไม่ดี มัน adipiscing tincidunt sagittis มันเป็นสังคมที่มีความกว้างและขนาดใหญ่ที่ไม่น่าสนใจของพวกเขาและพวกเขากำลังเยาะเย้ย แก้ไขเพิ่มเติมคำสั่งผสม lobortis dictum Curcerur molestie posuere laoreet ไม่ต้องสงสัยเลยว่าในตอนท้ายของการถ่ายภาพไม่ได้อยู่ที่นี่

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

ข้อความของคุณไปที่นี่

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

ข้อความของคุณไปที่นี่

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

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

ข้อความของคุณไปที่นี่

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

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

ข้อความของคุณไปที่นี่

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

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

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

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

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

 .left {float: left; การขยาย: 0 10px 0 0;}

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

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