Cần mã để bao quanh văn bản quanh hình ảnh? Thông thường khi bạn tạo trang HTML, mọi thứ dòng chảy tuyến tính, nghĩa là một khối trực tiếp sau khối khác. Tất cả bài viết trước của tôi là ví dụ của điều này, ví dụ: văn bản, sau đó hình ảnh, sau đó 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 hình ảnh thay vì bên dưới nó. Điều này gọi là bao quanh văn bản quanh hình ảnh. Thực tế khá dễ dàng để bao quanh văn bản bằng HTML. Lưu ý rằng bạn không phải sử dụng CSS để bao quanh văn bản.
Tuy nhiên, ngày nay 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 cả hai phương pháp dưới đây, nhưng nếu bạn có thể, tốt hơn nên dùng CSS vì nó thích ứng tốt hơn với thiết kế web đáp ứng.
Bao Quanh Văn Bản 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. 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.
Để văn bản bao quanh bên phải của hình ảnh, bạn phải căn chỉnh hình ảnh sang trái:
<img src="IMAGE URL" align="left" /><p>Văn bản của bạn ở đây.</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 ở bên phải xa, chỉ cần thay đổi tham số align thành "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>Văn bản của bạn ở đây.</p>
Đó là tất cả! Rất dễ dàng phải không? Lúc duy nhất bạn muốn dùng CSS là nếu bạn muốn thêm lề cho hình ảnh, để có khoảng trống giữa văn bản và hình ảnh.
Bạn có thể thêm lề cho hình ảnh bằng mã CSS sau:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Văn bản của bạn ở đây.</p>
Mã trên sử dụng phần tử CSS MARGIN để thêm 10 pixel khoảng trắng ở bên phải của hình ảnh. Vì chúng ta đã căn chỉnh hình ảnh trái, chúng ta muốn thêm khoảng trắng ở bên phải.
Về cơ bản, bốn số đại diện cho TRÊN PHẢI DƯỚI TRÁI. Vì vậy nếu bạn muốn thêm khoảng trắng cho hình ảnh căn phải, bạn sẽ làm thế này:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Văn bản của bạn ở đây.</p>
Vì vậy, dùng 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 cho các trang web đáp ứng.
Bao Quanh Văn Bản Quanh Hình Ảnh Bằng CSS
Cách tốt hơn để bao quanh văn bản quanh hình ảnh là dùng CSS. Nó cho bạn kiểm soát tinh vi hơn về định vị các yếu tố và hoạt động tốt hơn với tiêu chuẩn mã hóa hiện đại.
<img src="IMAGE URL" alt="Một bức ảnh" class="left" />
Mặc dù tôi đã đưa CSS trực tiếp vào thẻ image trong ví dụ HTML, bạn thực sự không nên làm như vậy nữa. Thay vào đó, bạn nên có một file riêng gọi là stylesheet chứa tất cả mã CSS của bạn.
Trong thẻ IMG, bạn chỉ cần gán một class cho thẻ và đặt tên cho nó. Trong ví dụ của tôi, tôi đặt tên class là left. Trong stylesheet 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 thấy, tôi thêm 10px padding ở bên phải của hình ảnh căn trái. Tôi cũng 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ó ở bên trái của container cha.
Như bạn thấy, nó sạch sẽ hơn nhiều so với 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ể dùng nhiều thuộc tính CSS hơn để tùy chỉnh giao diện trên trang web của bạn. Nếu bạn có bất kỳ câu hỏi nào, thoải mái bình luận. Thưởng thức!