Cần mã để bao 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ẽ chuyển 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 của tôi là một ví dụ về điều này, tức là văn bản, sau đó hình ảnh, sau đó văn bản, vv
Đô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à 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 cách sử dụ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, những ngày này, 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 nên sử dụng CSS vì nó thích ứng hơn với thiết kế trang web đáp ứng.
Quấn văn bản xung quanh Hình ảnh bằng HTML
Lorem ipsum dolor ngồi amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus và magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Pell pell pell pell in in in in in In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In In 3
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 ngoài cùng bên phải, chỉ cần thay đổi thông số căn chỉnh thành "phải".
Lorem ipsum dolor ngồi amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus và magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc trong lorem egestas không phải là enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Đúng vậy! Khá dễ phải không? Thời gian 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 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 sau mã kiểu dáng CSS:
<img itemprop="image" data-original=”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 ở 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 ở bên phải.
Về cơ bản, bốn số đại diện cho TOP RIGHT BOTTOM LEFT. Vì vậy, nếu bạn muốn thêm không gian màu trắng vào hình ảnh được căn phải, bạn sẽ làm điều này:
<img itemprop="image" data-original=”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 để thực hiện tác vụ này khá đơn giản, nhưng một lần một lần nữa, nó có thể không hoạt động tốt cho các trang web đáp ứng.
Quấn văn bản Xung quanh hình ảnh bằng cách sử dụng CSS
Cách tốt hơn để bao bọc văn bản xung quanh một 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 việc định vị 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 itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Mặc dù tôi đã đưa CSS trực tiếp vào thẻ hình ảnh trong ví dụ HTML , 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 biệt đượ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 bên trái. Trong bản định kiểu của tôi, tất cả những gì tôi phải làm là thêm mã sau đây:
.left {
float: left;
padding: 0 10px 0 0;}
Như bạn 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ó vào bên trái của thùng chứa cha mẹ.
Như bạn thấy, nó sạch hơn nhiều so với việc thêm tất cả mã đó với 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 nào, hãy bình luận. Hãy tận hưởng!