Jeśli dodasz dwa nowe elementy wewnętrzne do kontenera z klasą outer, domyślnie zostaną one ułożone pionowo jeden pod drugim, ponieważ elementy blokowe w HTML układają się w kolumnę.

Aby ułożyć je poziomo, można użyć CSS Flexbox. Na przykład:

.outer {
  display: flex;
  flex-direction: row; /* domyślnie, można pominąć */
}

To spowoduje, że wszystkie elementy potomne .outer będą ułożone w linii (poziomo). Możesz dodać marginesy, wyrównanie i inne właściwości dla bardziej precyzyjnej konfiguracji.

Poprzednia Dalej