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

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

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

ตัดข้อความรอบรูปภาพโดยใช้ 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 โม^(Curabitur)เลสตี้ posuere laoreet. Ut pellentesque nunc ใน lorem egestas non imperdiet enim congue

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

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

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

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 โม^(Curabitur)เลสตี้ posuere laoreet. Ut pellentesque nunc ใน lorem egestas non imperdiet enim congue

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

แค่นั้นแหละ! ค่อนข้าง^(Pretty)ง่ายใช่มั้ย? ครั้งเดียวที่คุณต้องการใช้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 ทั้งหมดของคุณ^(CSS)

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

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

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

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

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows lіnearly, mеaning one block directly after another. All of my previоus posts are an example of this, i.e. tеxt, then picturе, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

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.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

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

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

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.

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

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

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

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

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

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

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

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

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

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• วิธีสแกน QR Code บน iPhone และ Android

• วิธีพิมพ์ข้อความจาก Android

• บันทึกรายการกระบวนการที่ทำงานอยู่ในไฟล์ข้อความใน Windows

• วิธีดาวน์โหลดไฟล์และดูโค้ดจาก GitHub

• ค้นหาภายในไฟล์ข้อความหลายไฟล์พร้อมกัน

• วิธีการทดสอบความเครียดของ CPU

• ฟรีไซต์ Online OCR และบริการเพื่อแยก Text จาก Image

• วิธีการไหลข้อความรอบ ๆ รูปภาพใน InDesign

• วิธีอัปเดตซอฟต์แวร์พีซีของคุณโดยอัตโนมัติ

• SynWrite Editor: Free Text & Source Code Editor สำหรับ Windows 10

• วิธีเพิ่ม Shadow ถึง Text or Image ใน GIMP

• วิธีการโค้งข้อความใน Photoshop

• Convert Text ถึง HTML or XHTML กับ MarkdownPad สำหรับ Windows PC

• แก้ไข "อุปกรณ์ไม่สามารถเริ่มได้ (รหัส 10)” ผิดพลาด

• แยกข้อความจากไฟล์ PDF และไฟล์รูปภาพ

• วิธีดูซอร์สโค้ดของซอฟต์แวร์โอเพ่นซอร์ส

• วิธีถ่ายโอนข้อความจาก iPhone ไปยัง Android

• วิธีเชื่อมโยงกล่องข้อความใน Adobe InDesign

• วิธีลบข้อความออกจากไอคอนในทาสก์บาร์ของ Windows

• วิธีเพิ่มเพลงลงใน Google สไลด์