Użyj CSS Wyrównaj do lewej, aby umieścić obraz witryny na lewo od tekstu

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ść CSSpływak, 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).

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 (

lewo) 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:

.lewo {
pływak: lewy;
dopełnienie: 0 20px 20px 0;
}

Ten styl unosi wszystko z klasą lewo 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.

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:

.obraz treści głównej { 
pływak: lewy; 
dopełnienie: 0 20px 20px 0;
}

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ą.