alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpgCách đặt img ở góc dưới cùng bên phải của div
Đây là những gì tôi muốn làm. Một Div với một số văn bản trong đó và ở góc dưới bên phải một img. Hight của div là ổn định ở 24px nhưng chiều dài không được biết và có thể có nhiều hơn một trong số này divs Trong một hàng.
Có một số kỹ thuật để thực hiện việc này. Cách đơn giản nhất:
<div class="outer">
<img src="....">
</div>
với
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Bây giờ mất nó ra khỏi dòng chảy bình thường, mà là một vấn đề là bạn muốn nội dung khác để quấn/phao xung quanh nó. Trong trường hợp đó bạn thực sự cần phải biết chiều cao của hình ảnh và sau đó áp dụng các thủ thuật thích hợp tùy thuộc vào những gì bạn đã có.
Bắt đầu với Making the absolute, relative.
Nếu hình ảnh là cao 10 pixel, ví dụ, bạn có thể thử này:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Tất nhiên 14px xuất phát từ 24px - 10px. Tôi không biết nếu điều đó sẽ đáp ứng những gì bạn đang cố gắng để đạt được tuy nhiên.
vì vậy defenetly thx - về mã 1 - chỉ dưới: 0 với vị trí bên phải – bresleveloper
Tôi không thể bình luận câu trả lời từ Cletus, nhưng tôi đã phải thêm "px" vào "right: 0; bottom: 0;" vì vậy nó là: phải: 0px; dưới cùng: 0px; Trong trường hợp của tôi nếu tôi đặt một cái gì đó khác nhau của '0' mà không có hậu tố' px' nó không hoạt động. – Jxadro
Hình nền là giải pháp của bạn.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Bạn cũng có thể cần điều chỉnh phần đệm của div, vì vậy nội dung của div không chồng lên ảnh của bạn nếu cần.
Nếu bạn muốn thả nổi văn bản xung quanh hình ảnh, cả hai câu trả lời đều sai. Cả hai sẽ làm cho văn bản đi ngay trên hình ảnh. Tôi đã tìm kiếm hàng giờ và không có câu trả lời thực sự nào xuất hiện. This article giải thích rõ ràng hơn lý do tại sao cả hai câu trả lời đó sẽ không hoạt động nếu bạn cố gắng gói văn bản.
+1 cho hình ảnh sơn tha! –
Bạn cũng có thể thử 'background-image'. – Gumbo
Liên quan: [Đính kèm hình ảnh trên tất cả bốn góc của DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) & [Cách thông minh để thêm hình ảnh góc đến đường viền DIV trên tất cả bốn góc] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –