alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpgJak umieścić obraz w prawym dolnym rogu elementu
Oto, co chcę zrobić. Div z tekstem i prawym dolnym rogiem img. Wysokość div jest stabilna przy 24px, ale długość nie jest znana i może istnieć więcej niż jeden z tych divów z rzędu.
Istnieje kilka technik robienia tego. Najprostszy:
<div class="outer">
<img src="....">
</div>
z
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Teraz, zabiera go z normalnego przepływu, co jest problemem to chcesz inna zawartość zawinąć/pływaka wokół niego. W takim przypadku musisz znać wysokość obrazu, a następnie zastosować odpowiednie sztuczki w zależności od tego, co masz.
Zacznij od Making the absolute, relative.
Jeśli obraz jest 10 pikseli wysokości, na przykład, można spróbować to:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Oczywiście 14px 24px pochodzi - 10px. Nie wiem, czy to zaspokoi to, co próbujesz osiągnąć.
tak defenetycznie thx - o 1. kodzie - tylko u dołu: 0 z prawidłowym pozycjonowaniem – bresleveloper
Nie mogę skomentować odpowiedzi od Cletusa, ale musiałem dodać "px" do "right: 0; bottom: 0;" więc jest: prawy: 0px; dół: 0 pikseli; W moim przypadku, jeśli wstawię coś innego niż '0' bez sufiksu' px', to nie działa. – Jxadro
Zdjęcie w tle jest rozwiązaniem.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Być może trzeba dostosować Podkładka div, zbyt, więc zawartość div nie pokrywają swoje zdjęcie, jeśli jest to potrzebne.
Jeśli chcesz unieść tekst wokół obrazu, obie te odpowiedzi są błędne. Oba sprawią, że tekst przejdzie dokładnie nad obrazem. Szukałem wiele godzin i nie wydaje mi się, żeby istniała realna odpowiedź. This article bardziej wyraźnie wyjaśnia, dlaczego obie te odpowiedzi nie będą działać, jeśli próbujesz owijać tekst.
+1 za obraz farby! –
Można również wypróbować "obraz tła". – Gumbo
Powiązane: [Dołącz obrazy na wszystkich czterech rogach DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) & [Inteligentny sposób na dodanie obrazu rogu do granicy DIV na wszystkich czterech rogach] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –