Jeśli chcesz się nauczyć, jak unosić obraz na prawo od tekstu, jest to dość proste zadanie. Istnieje wiele sytuacji, w których programiści chcą, aby obraz na stronie sieci Web pojawił się wewnątrz tekstu z tekstem opływającym go lub owiniętym wokół niego. Manipulowanie obrazami jest podobny do manipulowania tekstem, więc jeśli masz doświadczenie z tym drugim, ten proces nie powinien być wcale trudny.
W rzeczywistości, dzięki właściwości pływaka CSS, łatwo jest umieścić obrazek na prawo od tekstu i sprawić, by tekst opływał go na lewa strona. Skorzystaj z tego pięciominutowego samouczka, aby dowiedzieć się, jak to zrobić.
Konfigurowanie układu za pomocą pływaka
Ten podstawowy układ utworzy miejsce na tekst i umieści obraz po prawej stronie tego tekstu. Z pewnością te układy mogą stać się bardziej skomplikowane, ale ten przykład pokaże podstawową zasadę pracy z pływakiem i tekstem.
Zakładając, że masz już dokument HTML, z którym pracujesz, i oddzielny arkusz stylów CSS, zacznij od utworzenia nowego elementu div, który będzie pełnił funkcję wiersza zawierającego element pływający.
Daj temu nowemu divowi dwie klasy, pojemnik i poprawkę. Istnieje wiele sposobów, aby sobie z tym poradzić, a nazwy są całkowicie Twoim wyborem, ale pomogą Ci one zachować porządek i ustalić układ.
-
W swoim CSS zdefiniuj, w jaki sposób chcesz dopasować kontener do ogólnego układu. Ten przykład sprawi, że będzie to wiersz o pełnej szerokości.
.pojemnik {
szerokość: 100%;
wysokość: 25rem;
} -
Następnie zajmij się klasą clearfix. Clearfix jest konieczny, ponieważ float może powodować dziwne usterki w twoim układzie. Zdefiniowanie właściwości „overflow” w poprawce Clearfix zapobiega wylewaniu elementów pływających z wyznaczonego miejsca.
.wyczyśćpoprawkę {
przelew: auto;
} -
Teraz możesz utworzyć element w swoim kontenerze div i przesunąć go w prawo. Jeśli owijasz tekst wokół obrazu, będzie to Twój obraz. Utwórz element i nadaj mu klasę dla właściwości float.
-
Stwórz klasę dla swojego pływaka. Prawdopodobnie będziesz chciał dorzucić trochę stylizacji, jeśli będziesz tworzyć więcej identycznych elementów. W przeciwnym razie możesz zastosować osobną klasę do swojej stylizacji.
.float-prawo {
pływak: w prawo;
szerokość: 300px;
wysokość: 200px;
kolor tła: czerwony;
margines: 0 0 0.5rem 0.5rem
} -
Jeśli chcesz zawinąć tekst wokół tego elementu pływającego, wstaw teraz tekst. Umieść go w dowolnym miejscu kontenera, przed lub za pływającym elementem.
Jakiś tekst
Więcej tekstu
...i tak dalej.
-
Odśwież swoją stronę i sprawdź wynik.
Zawijanie
I to wystarczy. Teraz widzisz, że przesuwanie obrazu w prawo wcale nie jest trudne. Możesz również zainteresować się przenoszeniem obrazu w lewo i przenoszeniem go do środka. Chociaż pierwszy ruch jest możliwy, niestety nie można umieścić obrazu na środku, ponieważ zwykle wymagałoby to układu dwukolumnowego.