Cần mã để bọc văn bản xung quanh một hình ảnh? Thông thường khi bạn tạo một trang HTML , mọi thứ diễn ra theo tuyến tính, có nghĩa là một khối trực tiếp sau khối khác. Tất cả các bài viết trước đây của tôi là một ví dụ về điều này, tức là văn bản, sau đó là hình ảnh, sau đó là văn bản, v.v.

Đôi khi bạn có thể muốn bao gồm văn bản bên cạnh một hình ảnh thay vì bên dưới nó. Đây được gọi là gói văn bản xung quanh hình ảnh. Nó thực sự khá dễ dàng để bọc văn bản bằng HTML . Lưu ý rằng bạn không cần phải sử dụng CSS để bọc văn bản.

Tuy nhiên, những ngày này W3C khuyến nghị sử dụng CSS thay vì HTML cho các loại tác vụ này. Tôi sẽ đề cập đến cả hai phương pháp bên dưới, nhưng nếu bạn có thể, tốt hơn nên sử dụng CSS vì nó dễ thích ứng hơn với các thiết kế trang web đáp ứng.

Gói văn bản xung quanh hình ảnh bằng HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cối xã hội natoque^(Cum) penatibus et magnis dis parturient montes, nascetur nhạo báng. Aliquam a felis vitae augue lobortis dictum. Curabitur moltie posuere laoreet. Ut pellentesque nunc trong lorem egestas nontirdiet Enim Conue.

Để có dòng chữ bao bọc dọc theo bên phải của hình ảnh, bạn phải căn chỉnh hình ảnh ở bên trái:

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

Nếu bạn muốn văn bản xuất hiện ở bên trái và hình ảnh xuất hiện ở ngoài cùng bên phải, chỉ cần thay đổi tham số căn chỉnh thành “phải”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cối xã hội natoque^(Cum) penatibus et magnis dis parturient montes, nascetur nhạo báng. Aliquam a felis vitae augue lobortis dictum. Curabitur moltie posuere laoreet. Ut pellentesque nunc trong lorem egestas nontirdiet Enim Conue.

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

Đó là nó! Khá^(Pretty) dễ dàng phải không? Lần duy nhất bạn muốn sử dụng CSS là nếu bạn muốn thêm lề vào hình ảnh, để có một số khoảng trống giữa văn bản và hình ảnh.

Bạn có thể thêm lề vào ảnh bằng cách sử dụng mã tạo kiểu CSS sau:^(CSS)

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

Đoạn mã trên sử dụng phần tử MARGIN CSS để thêm 10 pixel khoảng trắng ở phía bên phải của hình ảnh. Vì chúng tôi đã căn chỉnh hình ảnh bên trái, chúng tôi muốn thêm khoảng trắng vào bên phải.

Về cơ bản, bốn con số đại diện cho TRÁI PHẢI TRÊN TRÁI^{(TOP RIGHT BOTTOM LEFT)} . Vì vậy, nếu bạn muốn thêm khoảng trắng vào hình ảnh được căn phải, bạn sẽ làm như sau:

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

Vì vậy, việc sử dụng HTML^(HTML) để thực hiện tác vụ này khá đơn giản , nhưng một lần nữa, nó có thể không hoạt động tốt đối với các trang web đáp ứng.

Gói văn bản xung quanh hình ảnh bằng cách sử dụng CSS

Cách tốt hơn để bọc văn bản xung quanh hình ảnh là sử dụng CSS . Nó cung cấp cho bạn khả năng kiểm soát hạt mịn hơn đối với vị trí của các phần tử và hoạt động tốt hơn với các tiêu chuẩn mã hóa hiện đại.

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

Mặc dù tôi đã bao gồm CSS trực tiếp vào thẻ hình ảnh trong ví dụ HTML , bạn thực sự không nên làm điều đó nữa. Thay vào đó, bạn nên có một tệp riêng được gọi là biểu định kiểu chứa tất cả mã CSS của bạn .

Trong thẻ IMG , bạn chỉ cần gán một lớp cho thẻ và đặt tên cho nó. Trong ví dụ của tôi, tôi đặt tên cho lớp là left . Trong biểu định kiểu của tôi, tất cả những gì tôi phải làm là thêm mã sau:

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

Như bạn có thể thấy, tôi đã thêm 10px đệm vào bên phải của hình ảnh căn trái. Tôi cũng đã sử dụng thuộc tính float để di chuyển hình ảnh ra khỏi luồng thông thường của tài liệu và đặt nó ở phía bên trái của vùng chứa mẹ.

Như bạn có thể thấy, nó gọn gàng hơn nhiều so với việc thêm tất cả mã đó vào chính thẻ IMG . Nó cũng dễ quản lý hơn và bạn có thể sử dụng nhiều thuộc tính CSS hơn để tùy chỉnh giao diện trên trang web của mình. Nếu bạn có bất kỳ câu hỏi nào, hãy bình luận. Vui thích!

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 linearly, meaning one block directly after another. All of my previous postѕ are an example of this, i.e. text, then picture, 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

• Cách quét mã QR trên iPhone và Android

• Cách in tin nhắn văn bản từ Android

• Lưu danh sách các tiến trình đang chạy vào tệp văn bản trong Windows

• Cách tải xuống tệp và xem mã từ GitHub

• Tìm kiếm bên trong nhiều tệp văn bản cùng một lúc

• 8 trong số các ý tưởng công nghệ tốt nhất để đối phó với sự cô lập bản thân

• Cách xoay văn bản & hình ảnh trong Photoshop

• Cách xem mã nguồn của phần mềm nguồn mở

• 2 Công cụ để Thực hiện Tìm kiếm Hình ảnh Đảo ngược Trực tuyến

• Cách tạo nhóm trong Microsoft Teams

• Cách mở tệp HTML trong Google Chrome

• Xóa ngay nền khỏi hình ảnh bằng AI

• Cách tạo và quét mã Spotify

• Cách xóa văn bản khỏi biểu tượng trong thanh tác vụ Windows

• Cách tạo dòng văn bản xung quanh hình ảnh trong InDesign

• Cách liên kết các hộp văn bản trong Adobe InDesign

• Khắc phục “Thiết bị không thể khởi động. (Mã 10) ”Lỗi

• Tạo bản sao lưu hình ảnh hệ thống Windows 10

• Cách mở tệp hình ảnh EPS trên Windows

• Cách thêm Shadow vào Text or Image trong GIMP