Jak zrobić: tabelę równoległą

Jak zrobić tabelę równoległą

Jak używać CSS float Tworzenie wierszy tabeli wierszami równoległymi:

Przykład

* {
  box-sizing: border-box;
}
/* Tworzenie układu dwukolumnowego */
.column {
  float: left;
  szerokość: 50%;
  padding: 5px;
}
/* Clearfix (usuwanie浮动) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

spróbuj sam

Jak używać CSS flex Tworzenie wierszy tabeli wierszami równoległymi:

Przykład

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

spróbuj sam

Uwaga:Flexbox nie jest wspierany w Internet Explorer 10 i wcześniejszych wersjach. Czy używasz float lub flex zależy od Ciebie. Ale jeśli musisz obsługiwać wersje IE10 i wcześniejsze, powinieneś użyć float.

Wskazówka:Aby uzyskać więcej informacji na temat modułu Flexible Box Layout, przeczytaj nasz Tutorial CSS Flexbox.

Dodaj responsywność

Powyższy przykład nie wygląda zbyt estetycznie na urządzeniach przenośnych, ponieważ dwie kolumny zajmują zbyt dużo miejsca na stronie.

Aby utworzyć responsywną tabelę, która przechodzi od układu dwukolumnowego do pełnoszerokiego układu na urządzeniach przenośnych, dodaj następujące zapytanie media:

Przykład

/* Responsywna rozkładka – w ekranach mniejszych niż 600 pikseli, dwie kolumny są umieszczane jeden nad drugim zamiast obok siebie */
@media screen and (max-width: 600px) {
  .column {
    szerokość: 100%;
  }
}

spróbuj sam

strony związane

Tutorial:CSS tabela

Tutorial:CSS płynność

Tutorial:CSS Flexbox