Làm thế nào để Float một hình ảnh ở bên phải của văn bản

Hướng dẫn năm phút này giải thích cách thức

Bạn có quan tâm đến việc học cách nổi hình ảnh ở bên phải của văn bản không? Nếu vậy, bạn không đơn độc. Có rất nhiều tình huống mà các lập trình viên muốn một hình ảnh trên một trang Web xuất hiện bên trong văn bản với văn bản đang chảy hoặc quấn quanh nó. Rất may, thao tác hình ảnh là tương tự như thao tác văn bản, vì vậy nếu bạn có kinh nghiệm với sau này, quá trình này không phải là khó khăn cả.

Trong thực tế, với thuộc tính float CSS, thật dễ dàng để nổi hình ảnh của bạn ở bên phải của văn bản và có dòng văn bản xung quanh nó ở phía bên trái . Sử dụng hướng dẫn năm phút này để tìm hiểu cách thực hiện.

Bắt đầu

Để bắt đầu, hãy viết một đoạn văn bản và thêm một hình ảnh ở đầu đoạn văn. Điều này nên được thực hiện trước văn bản nhưng sau thẻ

):

Duis aute irure dolor sed làm eiusmod tempor incididunt trong reprehenderit trong voluptate. Cupidatat không phải là chủ nhân, bạn có thể sử dụng nó. Sunt trong culpa quis nostrud tập thể dục ngoại trừ sint occaecat. Mollit anim id est laborum.

Tiếp theo, thêm thuộc tính style vào ảnh và áp dụng thuộc tính float:

style = "float: right;" />

Văn bản của bạn sẽ được nén ngay trên hình ảnh, vì vậy hãy thêm một số lề vào hình ảnh để dễ đọc hơn:

lề: 0 5px 0 0; " />

Thuộc tính viết tắt của margin áp dụng các lề trong thứ tự trên cùng, bên phải, dưới cùng và bên trái ( TRBL ).

Gói lên

Và điều đó. Bây giờ bạn thấy rằng nổi một hình ảnh bên phải không phải là khó khăn cả. Bạn cũng có thể quan tâm thả nổi một hình ảnh ở bên trái và thả nó vào giữa. Trong khi di chuyển đầu tiên là có thể, tiếc là bạn không thể nổi một hình ảnh đến trung tâm, vì điều đó thường sẽ yêu cầu bố trí hai cột.