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ứ sẽ chảy tuyến tính, nghĩa là một khối trực tiếp sau một 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ó. Điều này được gọi là văn bản gói 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 phải sử dụng CSS để bọc văn bản.
Tuy nhiên, ngày nay, W3C khuyên bạn nên sử dụng CSS thay vì HTML cho các loại nhiệm vụ này. Tôi sẽ đề cập đến cả hai phương pháp dưới đây, nhưng nếu bạn có thể, tốt hơn là sử dụng CSS vì nó phù hợp hơn với các thiết kế trang web đáp ứng.
Bao bọc văn bản xung quanh hình ảnh bằng HTML
Lorem ipsum dolor ngồi amet, consitetur 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 nutentesque nunc in lorem eestas non invdiet enim congue.
Để có bao bọc văn bản dọc theo bên phải của hình ảnh, bạn phải căn chỉnh hình ảnh sang bên trái:
Văn bản của bạn ở đây.
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 ở phía bên phải, chỉ cần thay đổi tham số căn chỉnh thành bên phải trực tiếp.
Lorem ipsum dolor ngồi amet, consitetur 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 nutentesque nunc in lorem eestas non invdiet enim congue.
Văn bản của bạn ở đây.
Đó là nó! Khá dễ 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 ảnh, để có một 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ã kiểu CSS sau:
Văn bản của bạn ở đây.
Đoạn mã trên sử dụng phần tử CSS MARGIN để thêm 10 pixel khoảng trắng ở bên phải hình ảnh. Vì chúng ta đã căn chỉnh hình ảnh bên trái, chúng tôi muốn thêm khoảng trắng ở bên phải.
Về cơ bản, bốn con số đại diện cho TRÁI PHIẾU HÀNG ĐẦU. 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 điều này:
Văn bản của bạn ở đây.
Vì vậy, khá đơn giản để sử dụng HTML để thực hiện tác vụ này, nhưng một lần nữa, nó có thể không hoạt động tốt cho các trang web đáp ứng.
Bao bọc văn bản xung quanh hình ảnh bằng CSS
Cách tốt hơn để bọc văn bản xung quanh một hình ảnh là sử dụng CSS. Nó cho phép bạn kiểm soát hạt tốt hơn đối với việc định vị các yếu tố và hoạt động tốt hơn với các tiêu chuẩn mã hóa hiện đại.
Mặc dù tôi đã đưa CSS trực tiếp vào thẻ hình ảnh trong ví dụ HTML, nhưng bạn thực sự không bao giờ nên làm điều đó nữa. Thay vào đó, bạn nên có một tệp riêng 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 lớp còn lại . 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 đoạn mã sau:
.left {float: trái; đệm: 0 10px 0 0;} Như bạn có thể thấy, tôi đã thêm 10px của phần đệm vào phía bên phải của hình ảnh được 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 bình thường của tài liệu và đặt nó vào bên trái của thùng chứa cha.
Như bạn có thể thấy, nó sạch hơn nhiều so với việc thêm tất cả mã đó vào chính thẻ IMG. Việc quản lý cũng dễ dàng 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, hãy bình luận. Thưởng thức!
