CSS owij tekst wokół obrazu
Przykład 1:
Rozpoczniemy pisanie kodu i wykonamy go w kodzie Visual Studio. Na początek tworzymy nowy plik i wybieramy HTML jako język. Teraz umieść „!”I naciśnij klawisz„ Enter ”. Wszystkie niezbędne tagi HTML można wyświetlić tutaj. Nie będziemy musieli pisać wszystkich tych tagów. Następnie po prostu używamy znacznika „linku” w „głowie”, aby wstawić nazwę pliku CSS, który chcemy połączyć z tym plikiem HTML. W tym kodzie najpierw umieszczamy nagłówek, a następnie Div z nazwą „Square”. Wewnątrz tej „kwadratowej” div mamy inną div, w której wkładamy obraz, wykorzystując znacznik „IMG”.
Po umieszczeniu obrazu w drugim div zamknij tę div i wygeneruj akapit poniżej tego div. Kiedy ukończymy ten akapit i zamkniemy go. Następnie zamykamy pierwszy znacznik „div”. Owinąć ten tekst wokół tego obrazu, który wstawiliśmy. Do owijania tekstu przejdziemy do pliku CSS, gdzie użyjemy właściwości „Float” do owijania tekstu.
Najpierw musimy ustawić „margines” ciała na „20px”, a także wyrównać całe ciało do „środka”. Nagłówek „H1” jest również ozdobiony „fioletowym” jako „kolor” tego nagłówka. Używamy „rodziny czcionki” i dostosowujemy ją do „Algierskiego”. Następnie używamy właściwości „pływak” dla obrazu, który wprowadziliśmy do kodu HTML. I ustaw tę wartość właściwości „zmiennoprzecinkowej” na „lewy”, jak dla obrazu, aby przesunąć się na lewą stronę. Dostosowujemy również „margines” obrazu do „4px”. „Szerokość” i „wysokość” tego obrazu to „250px”. Mamy również akapit, więc ustawiliśmy również ten akapit. Wyrównujemy tekst akapitu i ustawiamy go na „uzasadnienie”. Ustawiamy „rozmiar czcionki” tego akapitu i dostosowujemy go do „20px”. „Rodzina czcionki” dla tego akapitu to „Calibri”.
Poniżej znajduje się zrzut ekranu powyższego kodu, a zobaczysz, że obraz unosi się po lewej stronie, a tekst jest owinięty do tego obrazu po prawej stronie. Owijamy tekst akapitu wokół tego obrazu za pomocą właściwości „Float” w CSS.
Przykład nr 2:
W tym przykładzie używamy powyższego kodu HTML. W tym kodzie CSS ustawiamy margines ciała na „20px”, a właściwość „Alignaj tekstu” jest dostosowywana do „środka”. „Kolor” jest „zielony” dla nagłówka, a „Rodzina czcionki” to „Algierski”. Użyj także „dekoracji tekstu” i umieść „podkreśl” jako wartość tej właściwości. Płyniemy obraz do „prawej”, aby tekst akapitu pojawił się po lewej stronie tego obrazu. „Margines” „IMG” to „5px”.
Ustawiliśmy również „szerokość” na „190px”, a także „wysokość” to „90px”. Below this, we use the “text-align” property for the “p” and this “p” is describing the paragraph. Ustawiamy właściwość „Alignaj tekst” na słowo kluczowe „uzasadnij”, a „rozmiar czcionki” jest ustawiony na „18px”. „Times New Roman” jest wykorzystywany jako „rodzina czcionki”.
Możesz zobaczyć na poniższym zrzucie ekranu, że obraz pojawia się po prawej stronie z powodu właściwości „pływak”, a tekst jest owinięty wokół tego obrazu.
Przykład nr 3:
Będziemy tutaj używać dwóch różnych obrazów. Umieściliśmy pierwsze zdjęcie w Div, a następnie umieszczamy akapit. Po tym akapicie ponownie wstawiamy obraz do innego div i ponownie dodajemy akapit poniżej tego obrazu. Dostosujemy tekst wokół obu obrazów w kodzie CSS. Spójrz, jak opakujemy tekst wokół obu obrazów w CSS poniżej.
„Margines” i właściwość „Aligacja tekstu” dla ciała są takie same, jak użyliśmy w powyższych przykładach. „Kolor” jest zmieniany na „czerwony” tym razem na nagłówek. „Rodzina czcionki” jest wybierana jako „algierski”, a także „podkreśla” ten nagłówek. Ustawiamy właściwość „Float” dla pierwszego obrazu, wspominając nazwę pierwszej klasy obrazu i ustawiając właściwość „Float” na „Right”. „Margines”, którego używamy dla pierwszego obrazu, to „5px”. Wykorzystujemy również właściwość „szerokość” i „wysokość” i ustawiamy zarówno na „200px”.
Następnie dostosowujemy również drugi obraz i „unosimy” ten drugi obraz do „lewy”, a jego „margines” jest taki sam, jak ustawiliśmy dla pierwszego obrazu. Teraz „uzasadniamy” ten akapit i ustawiamy „rozmiar czcionki” na „17px”. „Arial” jest wykorzystywany jako „roda czcionki” dla „P”.
Dwa obrazy są renderowane w wyjściu. Pierwszy obraz jest renderowany po stronie „lewej”, a drugi obraz jest renderowany po „prawej” stronie ekranu wyjściowego, a cały tekst jest owinięty wokół obu obrazów.
Przykład nr 4:
W naszym ostatnim przykładzie umieszczamy akapit, a następnie Div. Wewnątrz tego kontenera Div wstawiamy również obraz i akapit. Teraz spójrz, w jaki sposób wykorzystujemy wszystkie te akapity i dostosowujemy obraz, a także owinąć tekst wokół obrazu.
Używamy wartości „20px” i „środkowych” wartości dla ciała dla ciała. Następnie ustawiamy kolor na „bordowy” na nagłówek i czcionkę „Algierską” rodzinę czcionki. „Podkreślamy” nagłówek. Definiujemy właściwość „Float” dla obrazu, określając nazwę klasy obrazu i ustawiając właściwość „Float” na „Left”. W przypadku tego obrazu „margines”, którego używamy, to „5px”. „Szerokość” tego obrazu to „300px”, a jego „wysokość” to „300px”.
Teraz stosujemy niektóre nieruchomości do akapitu, aby było bardziej atrakcyjne. Ustawiamy „kolor” tekstu akapitu na „czarny”. Ustawiamy również właściwość wyrównania tekstu na „uzasadnienie” i ustawiamy „18px” dla „wielkości czcionki”. Dostosowujemy również „Times New Roman” „Font-Family” do akapitu.
Możesz zauważyć, że nad obrazem znajduje się akapit, akapit pod obrazem, tekst akapitu po prawej stronie obrazu, a obraz unosi się na lewą stronę. Tekst akapitu obejmuje ten obraz, ponieważ ustawiamy to w kodzie CSS.
Wniosek
Celem tego artykułu jest wyjaśnienie, jak owinąć tekst wokół obrazu w CSS. W tym artykule studiowaliśmy tę koncepcję i wyjaśniliśmy, co to jest owijanie tekstu i co powinniśmy zrobić, aby owinąć tekst wokół obrazu. Użyliśmy właściwości „Float” do unoszenia obrazu do „lewej” lub „prawej” i owijania tekstu wokół tego obrazu. Dołączyliśmy również wiele przykładów, w których owinęliśmy tekst wokół obrazu, w tym wyniki wszystkich przykładów artykułu. Mam nadzieję, że będziesz miał całkiem niezłe zrozumienie tekstu opakowania wokół koncepcji obrazu w CSS po przeczytaniu tego artykułu i zastosowaniu tych przykładów do praktyki samodzielnie.