Przykład unoszenia CSS

Ta strona oferuje powszechne przykłady płynnego projektowania.

Siatka / Ramki o równej szerokości

Box 1
Box 2
Box 1
Box 2
Box 3

Przy użyciu float Właściwość, która pozwala łatwo umieszczać równolegle zawartość ramki:

Przykład

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Trzy ramki (cztery ramki używają 25%, dwie ramki używają 50%, itd.) */
  padding: 50px; /* Jeśli chcesz dodać odstęp między obrazami */
}

Spróbuj sam

Co to jest box-sizing?

Możesz łatwo utworzyć trzy równoległe ramki. Jednak gdy dodajesz pewne treści, aby rozszerzyć szerokość każdej ramki (np. wewnętrzne wewnętrzne lub krawędzie), ramka ta zostanie uszkodzona. box-sizing Właściwość pozwala nam uwzględnić w łącznej szerokości (i wysokości) ramki wewnętrzne i krawędzie, zapewniając, że wewnętrzne wewnętrzne pozostają w ramce i nie pękają.

Możesz znaleźć nasze CSS Box Sizing W tej rozdziale nauczysz się więcej o właściwości box-sizing.

Obrazy równoległe

Tego typu siatka (The grid of boxes) może również być używana do równoległego wyświetlania obrazów:

Przykład

.img-container {
  float: left;
  width: 33.33%; /* Trzy ramki (cztery ramki używają 25%, dwie ramki używają 50%, itd.) */
  padding: 5px; /* Jeśli chcesz dodać odstęp między obrazami */
}

Spróbuj sam

Ramki o równej szerokości

W przykładzie powyżej nauczyłeś się, jak równolegle umieszczać ramki z równą szerokością. Jednak stworzenie ramki o równej wysokości nie jest łatwe. Jednak szybkie rozwiązanie to ustawienie stałej wysokości, jak pokazano w przykładzie:

Box 1

Niektóre zawartości, niektóre zawartości, niektóre zawartości

Box 2

Niektóre zawartości, niektóre zawartości, niektóre zawartości

Niektóre zawartości, niektóre zawartości, niektóre zawartości

Niektóre zawartości, niektóre zawartości, niektóre zawartości

Przykład

.box {
  height: 500px;
}

Spróbuj sam

Ale, robienie tak pozbawia go elastyczności. Jeśli można zapewnić, że wewnątrz pudełka zawsze będzie taka sama liczba treści, to jest w porządku. Ale często treści są różne. Jeśli spróbujesz powyższego przykładu na telefonie, zobaczysz, że zawartość drugiego pudełka wyświetli się poza jego granicami. To jest miejsce, gdzie używa się CSS3 Flexbox - ponieważ może automatycznie rozciągać pudełko, aby miało taka sama długość jak najdłuższe pudełko:

Przykład

Stworzenie kontenera elastycznego za pomocą Flexbox:

Box 1 - Oto kilka tekstów, aby upewnić się, że zawartość jest naprawdę wysoka. Oto kilka tekstów, aby upewnić się, że zawartość jest naprawdę wysoka. Oto kilka tekstów, aby upewnić się, że zawartość jest naprawdę wysoka. Oto kilka tekstów, aby upewnić się, że zawartość jest naprawdę wysoka. Oto kilka tekstów, aby upewnić się, że zawartość jest naprawdę wysoka.
Box 2 - Moja wysokość będzie followała box 1.

Spróbuj sam

Jedynym problemem Flexbox jest to, że nie działa w Internet Explorer 10 lub wcześniejszych wersjach. Możesz znaleźć nasze CSS Flexbox Dowiedz się więcej o modułach układu Flexbox w tej sekcji.

Menu nawigacyjne

Dodaj float Używane razem z listą hiperłączy do tworzenia poziomego menu:

Przykład

Spróbuj sam

Przykłady układu strony internetowej

Użycie float Atrybuty uzupełniają często całą strukturę strony internetowej:

Przykład

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Spróbuj sam

Więcej przykładów

Obraz z obramowaniem i marginesami przepływający do prawej strony akapitu
Przesunięcie obrazu w prawo w stosunku do akapitu. Dodaj obramowanie i marginesy do obrazu.
Obraz z tytułem przepływający do prawej strony
Przesunięcie obrazu z tytułem w prawo.
Przesunięcie pierwszej litery akapitu w lewo
Przesunięcie pierwszej litery akapitu w lewo i ustawienie jej stylu.
Stworzenie strony internetowej za pomocą przepływu
Użycie przepływu do stworzenia strony głównej z poziomym menu nawigacyjnym, nagłówkiem, stopką, bocznym menu i głównym treściem.

Wszystkie atrybuty przepływu CSS

Atrybut Opis
box-sizing Obliczanie szerokości i wysokości elementu: czy powinny one zawierać wewnętrzne marginesy i ramki.
clear Określa, które elementy mogą być float obok elementu, który zostanie usunięty, oraz na哪szej stronie.
float Określa, jak element ma być float.
overflow Określa, co się stanie, jeśli zawartość przewyższa obszar elementu.
overflow-x Określa, jak przetwarzać bokowe krawędzie zawartości elementu, gdy zawartość przewyższa obszar elementu.
overflow-y Określa, jak przetwarzać wierzchołki/górne krawędzie zawartości elementu, gdy zawartość przewyższa obszar elementu.