W HTML obrazy są używane do różnych celów i zwykle są wyświetlane w formie pionowej osobno. Czasami jednak może być konieczne umieszczenie obrazów obok siebie, aby stworzyć stylowy układ lub spełnić dowolny inny cel tworzenia stron internetowych.

W tym artykule omówimy, jak umieścić dwa Divy obok siebie w CSS, używając:

• platforma
• siatka
• przewód

Zacznijmy!

Metoda 1: Umieść dwa Divy obok siebie w CSS za pomocą Float

W CSS „platforma”Właściwość określa pływający kierunek elementu. Umieszcza element po prawej lub lewej stronie pojemnika, umożliwiając elementy inline i tekstowe na owinięcie.

Składnia

Składnia właściwości zmiennoprzecinkowej to:

Float: Brak | po lewej | prawy

Oto opis związany z wyżej wymienioną wartością właściwości zmiennoprzecinkowej:

• nic: Służy do braku pływania.
• lewy: Służy do pływania elementów po lewej stronie.
• Prawidłowy: Służy do pływania elementów po prawej stronie.

Używając "platforma„Własność, możesz także umieszczać obrazy obok siebie. Przejdźmy do przykładu umieszczania obrazów obok siebie.

Przykład 1: Umieszczenie dwóch obrazów obok siebie za pomocą właściwości Float

Tutaj dodaliśmy nagłówek za pomocą

i stworzył dwa Divy i przypisał do niego źródła obrazu.

Html

Umieść obrazy obok siebie za pomocą Float CSS

W CSS użyjemy „.div„Aby uzyskać dostęp do obu divów, które utworzyliśmy w pliku HTML. Następnie przypisz wartość właściwości zmiennoprzecinkowej jako „lewy". W rezultacie efekt zostanie zastosowany do obu naszych pojemników.

CSS

.div
float: lewy;

Jak widać, z powodzeniem umieściliśmy obrazy obok siebie:

Przykład: Umieść dwa obrazy obok przestrzeni

Jeśli chcesz stworzyć przestrzeń między tymi dwoma obrazami i umieścić je obok siebie, użyj „szerokość”Właściwość i przypisz do niej wartość.

Tutaj przypisamy wartość właściwości szerokości jako „300px”:

.div
float: lewy;
szerokość: 300px;

Zapisz podany kod i sprawdź wyniki:

Metoda 2: Umieść obrazy obok siebie w CSS za pomocą siatki

Aby umieścić dwa lub więcej niż dwa obrazy obok siebie „siatka”Układ jest używany. Zasadniczo siatka jest wartością właściwości wyświetlacza używanej do utworzenia układu składającego się z wierszy i kolumn.

Składnia

Składnia właściwości wyświetlacza z układem siatki jest podana w następujący sposób:

Wyświetlacz: siatka;

Przejdźmy do przykładu.

Przykład

Tutaj utworzymy cztery subspimy w głównych nazwach div jako „rodzic”I dodaj do niego obrazy za pomocą znacznika.

Html

Umieść obrazy obok siebie za pomocą siatki CSS

Następnie w sekcji CSS użyjemy „.rodzic”Aby uzyskać dostęp do Div Parent i ustawić wartość właściwości wyświetlania jako„siatka". Następnie ustawimy ułamek za pomocą „Kolecki z kratami„Właściwość do utworzenia miejsca dla kolumn. Określanie „1fr„Trzy razy stworzy”trzy”Kolumny, co oznacza, że ​​wszystkie Divy mają równą przestrzeń. Ponadto ustawimy lukę między kolumnami za pomocą właściwości GAP w kolumnie i ustawimy jej wartość jako „5px”:

.rodzic
Wyświetlacz: siatka;
Kolecka z kradzieży siatki: 1FR 1FR 1FR;
Gapa w kolumnie: 5px;

Po ukończeniu kodu CSS wykonaj plik HTML i sprawdź wyjście:

Metoda 3: Umieść dwa obrazy obok siebie w CSS za pomocą Flex

„„przewód”To wartość właściwości wyświetlacza, która umożliwia umieszczenie elementów obok siebie. W takim scenariuszu elementy zostaną ustawione zgodnie z wyświetlaniem ekranu wyświetlania.

Składnia

Składnia właściwości wyświetlacza z Flex to:

Wyświetlacz: Flex;

Przejdźmy do przykładu:

Przykład

Rozważymy poprzedni plik HTML i dodamy trzy Sub Divy wewnątrz głównej div i określamy różne źródła obrazów:

Umieść obrazy obok siebie za pomocą CSS Flex

W CSS ustaw wartość właściwości wyświetlania jako „przewód”I ustaw lukę w kolumnie jako„5px”:

.rodzic
Wyświetlacz: Flex;
Gap: 5px;

To da następujący wynik:

Zapewniliśmy trzy proste sposoby umieszczania obrazów obok siebie w HTML i CSS.

Wniosek

Obrazy są umieszczane obok siebie przy użyciu trzech różnych metod CSS, które są „przewód" I "siatka”Wartości właściwości wyświetlania i„platforma" nieruchomość. CSS pozwala również umieścić przestrzeń lub lukę między tymi sąsiednimi obrazami. W tym przewodniku szczegółowo omówiliśmy te trzy metody i przedstawiliśmy przykłady każdej metody umieszczania obrazów obok siebie za pomocą CSS.