Grafika i obrazy sprawiają, że strony internetowe są bardziej przyjazne dla użytkownika. Ponadto obrazy przyciągają uwagę użytkownika i pomaga w stylizacji lub projektowaniu aplikacji. Aplikacja posiadająca więcej obrazów ma więcej widoków. Ponadto istnieje kilka sposobów dostosowania pozycji obrazu w CSS, takich jak użycie Flexbox, Grid, Float Properties i wiele innych.

W zapisie omówi różne metody posiadania obrazów i tekstu obok siebie w HTML.

Warunek: Utwórz plik HTML

Przed przejściem do głównego tematu postu postępuj zgodnie z poniższymi instrukcjami tworzenia pliku HTML:

• Dodać "„Element i nazwij swoją klasę”Linux-details".
• Dodaj dwa „” elementy dziecięce w głównym „” odpowiednio dla obrazu i tekstu. Przypisz „„Oznacz klasę„Linux-Img”I„ „

  „Tag z klasą”tekst".

• Dostosuj rozmiar czcionki ”

  ”Tag, wykorzystując„rozmiar czcionki" nieruchomość.

• Dołącz trochę tekstu w „

  ”Tag.

Html

Linuxhint

Wysokiej jakości filmy, najlepsze artykuły

Metoda 1: Jak mieć obraz i tekst obok siebie za pomocą właściwości „Float”?

CSS „platforma„Własność jest wykorzystywana do określenia pozycji elementu, niezależnie od tego, czy jest on pływającym w lewo czy w prawo, czy brak. Pływający element będzie otoczony elementami obok.

Style klasa „Linux-details”

Aby to zrobić, po pierwsze, stygnij „Linux-details„Klasa, przypisując następujące właściwości:

.Linux-details
Szerokość: 80%;
Wyściółka: 1%;

„„.Linux-details”Służy do dostępu do utworzonego pojemnika. Ta klasa jest następnie stosowana z poniżej wyjaśnionymi właściwościami:

• "szerokość”Określa szerokość elementu.
• "wyściółka„Przydziela przestrzeń wokół zawartości elementu.

Style klasa „Linux-Img”

CSS „platforma„Własność jest dodawana w ramach„Linux-Img„Klasa, aby dostosować pozycję obrazu:

.Linux-Img
Wysokość: 150px;
szerokość: 150px;
margines lewica: 30%;
float: lewy;

Tutaj:

• "wysokość”Dostosowuje wysokość elementu.
• "margines lewic”Dodaje trochę miejsca na lewą stronę elementu.
• "platforma„Własność o wartości”lewy- unosi obraz po lewej stronie. W rezultacie zawartość tekstu obok, zostanie po niej umieszczona.

Wyjście

Metoda 2: Jak mieć obraz i tekst obok siebie za pomocą właściwości „Grid”?

CSS „siatka„Propert zapewnia prostszy sposób zaprojektowania układu witryny dostarczającego wiersze i kolumny.

Style klasa „Linux-details”

Teraz "siatka„Nieruchomość jest umieszczana w„Linux-details" klasa:

.Linux-details
Wyświetlacz: siatka;
Wyrównanie: Center;
Kolecka z kradzieży siatki: 1FR 1FR;
Gapa w kolumnie: 5px;

„„Linux-details„Klasa przypisuje się następujące właściwości:

• "wyświetlacz„Właściwość o wartości przypisanej jako„siatka”Zapewnia układ zawierający wiersze i kolumny.
• "Wyrównanie”Z wartością„Centrum”Umieszczone służy do umieszczenia elementu w środku.
• "Kolecki z kratami„Własność o wartości”1FR 1FR”Zapewnia dwie kolumny jednej frakcji każda.
• "luka w kolumnie”Właściwość dodaje przestrzeń między kolumnami.

Element stylu „IMG”

img
maksymalna szerokość: 100%;
Max-Height: 100%;

„„„Element jest podany poniżej wspomnianych właściwości:

• "maksymalna szerokość„Właściwość określa maksymalną szerokość elementu.
• "maksymalna wysokość”Definiuje maksymalną wysokość elementu.

Wyjście

Metoda 3: Jak mieć obraz i tekst obok siebie za pomocą właściwości „Flex”?

CSS „przewód„Nieruchomość umieszcza elementy z rzędu (domyślnie).

Style klasa „Linux-details”

.Linux-details
Wyświetlacz: Flex;
Wyrównanie: Center;
Justify-Content: Center;
Wyściółka: 5%;

Oto wyjaśnienie wymienionych powyżej właściwości:

• "wyświetlacz„Własność o wartości”przewód„Umieści„„Treść elementu z rzędu.
• "Wyrównanie”Wyrównuje elastyczne elementy pionowo.
• "justify-content”Ustawia wyrównanie elastycznego elementu poziomo.

Stylowa klasa „tekstowa”

.tekst
Rozmiar czcionki: 20px;
Padding-Left: 20px;

„„tekst„Klasa jest stylizowana, wykorzystując następujące właściwości:

• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki.
• "Padding-Left”Dodaje miejsce po lewej stronie tekstu.

Wyjście

Chodziło o to, aby obraz i tekst obok siebie przy użyciu różnych właściwości.

Wniosek

Można wykorzystać kilka właściwości do umieszczania obrazu i tekstu obok siebie na stronie internetowej. Najczęściej używane właściwości to „platforma”,„siatka", I "przewód". Aby to zrobić, stwórz „" pojemnik. Dodaj jeszcze dwa elementy „” obrazu i tekstu. Następnie zastosuj jedną z wymienionych właściwości do głównego znacznika „” dla regulacji pozycji obrazu i tekstu. Ten blog wyjaśnił różne właściwości do umieszczenia obrazu i tekstu obok siebie.