Jak umieścić obraz na lewo od tekstu na stronie internetowej

Użyj CSS, aby precyzyjnie umieścić swoje obrazy

Elementy blokowe na stronie internetowej pojawiają się w kolejności sekwencyjnej. Aby poprawić wygląd lub użyteczność strony, możesz zmodyfikować tę kolejność poprzez zawijanie bloków, w tym obrazów, tak aby tekst opływa obrazy .

W terminologii projektowania stron internetowych ten efekt jest znany jako pływający obraz. Osiąga się to dzięki Właściwość CSS platforma , który umożliwia przepływ tekstu wokół wyrównanego do lewej obrazu do jego prawej strony (lub wokół wyrównanego do prawej obrazu do jego lewej strony).

Maskot/Getty Images

Zacznij od HTML

Ten przykład dodaje obraz na początku akapitu (przed tekstem, ale po otwarciu)

etykietka). Oto początkowy znacznik HTML:

|_+_|

Tekst paragrafu znajduje się tutaj. W tym przykładzie mamy obraz zdjęcia w głowę, więc ten tekst może opisywać osobę na zdjęciu w głowę.

Domyślnie strona byłaby wyświetlana z obrazem nad tekstem, ponieważ obrazy są elementami na poziomie bloku w HTML. Oznacza to, że przeglądarka domyślnie wyświetla podziały wierszy przed i po elemencie obrazu. Aby zmienić ten domyślny wygląd za pomocą CSS, dodaj wartość klasy ( lewy ) do elementu obrazu, aby służył jako hak, do którego można dołączyć właściwości.

|_+_|

Tekst paragrafu znajduje się tutaj. W tym przykładzie mamy obraz zdjęcia w głowę, więc ten tekst może opisywać osobę na zdjęciu w głowę.

Zauważ, że ta klasa sama nic nie robi. CSS osiągnie pożądany styl.

Dodawanie stylów CSS

Dodaj tę regułę do witryny arkusz stylów :

|_+_|

Ten styl unosi wszystko z klasą lewy po lewej stronie i dodaje trochę wyściółka po prawej i u dołu obrazu, aby tekst nie przylegał do niego.

W przeglądarce obraz byłby teraz wyrównany do lewej; tekst pojawiłby się po jego prawej stronie z odstępem między nimi.

Wartość klasy .lewy użyte tutaj jest arbitralne. Możesz go nazwać jak tylko zechcesz, ponieważ sam z siebie nic nie robi. Jednak nie powinieneś również, aby każda wartość, którą zmienisz w CSS, była również odzwierciedlona w HTML.

Inne sposoby na osiągnięcie tych stylów

Możesz również usunąć wartość klasy z obrazu i nadać mu styl za pomocą CSS, pisząc bardziej szczegółowy selektor. W poniższym przykładzie obraz znajduje się wewnątrz podziału z a główna zawartość wartość klasy.

|_+_|

Tekst paragrafu znajduje się tutaj. W tym przykładzie mamy obraz zdjęcia w głowę, więc ten tekst może opisywać osobę na zdjęciu w głowę.

Aby wystylizować ten obraz, napisz ten CSS:

|_+_|

W tym scenariuszu obraz jest wyrównany do lewej, a tekst unosi się wokół niego, jak poprzednio, ale bez dodatkowej wartości klasy w znaczniku. Wykonanie tego na dużą skalę może pomóc w stworzeniu mniejszego pliku HTML, który będzie łatwiejszy w zarządzaniu i może poprawić wydajność.

Unikaj stylów wbudowanych

Wreszcie możesz użyć style wbudowane :

|_+_|

Tekst paragrafu znajduje się tutaj. W tym przykładzie mamy obraz zdjęcia w głowę, więc ten tekst może opisywać osobę na zdjęciu w głowę.

Nie jest to jednak wskazane, ponieważ łączy styl elementu z jego znacznikami strukturalnymi. Najlepsze praktyki nakazują, aby styl i struktura strony pozostały oddzielne. Ta segregacja jest szczególnie pomocna, gdy trzeba zmienić układ strony i poszukać różnych rozmiarów ekranów i urządzeń z responsywną stroną internetową.

Przeplatanie stylu strony z HTML sprawia, że tworzenie zapytań medialnych znacznie trudniej dostosować witrynę do różnych ekranów.