CSS Layout - Float voorbeeld

Deze pagina biedt veel voorkomende浮动voorbeelden.

Grid / Blokken met dezelfde breedte

Box 1
Box 2
Box 1
Box 2
Box 3

Door gebruik te maken van float De eigenschap maakt het gemakkelijk om浮动 inhoudsblokken naast elkaar te zetten:

Voorbeeld

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Drie blokken (voor vier blokken gebruik 25%, voor twee blokken 50%, enzoverder) */
  padding: 50px; /* Als je een ruimte tussen de afbeeldingen wilt toevoegen */
}

Probeer het zelf

Wat is box-sizing?

Je kunt eenvoudig drie浮动blokken naast elkaar maken. Maar wanneer je inhoud toevoegt om de breedte van elk blok te vergroten (bijvoorbeeld, inkepingen of randen), breekt dit blok. box-sizing De eigenschap laat ons toe om de totale breedte (en hoogte) van de blokken te omvatten, zodat de inkepingen binnenin de blokken blijven en niet breken.

Je kunt meer vinden in onze CSS Box Sizing In dit hoofdstuk leer je meer over de eigenschap box-sizing.

Afbeeldingen naast elkaar

Dit soort raster (The grid of boxes) kan ook gebruikt worden om afbeeldingen naast elkaar te tonen:

Voorbeeld

.img-container {
  float: left;
  width: 33.33%; /* Drie blokken (voor vier blokken gebruik 25%, voor twee blokken 50%, enzoverder) */
  padding: 5px; /* Als je een ruimte tussen de afbeeldingen wilt toevoegen */
}

Probeer het zelf

Blokken met dezelfde breedte

In het voorbeeld dat je zag, leerde je hoe je blokken naast elkaar kunt浮动en met dezelfde breedte. Het is echter niet gemakkelijk om浮动blokken met dezelfde hoogte te maken. Een snelle oplossing is om een vaste hoogte in te stellen, zoals in het volgende voorbeeld:

Box 1

Enkele inhoud, enkele inhoud, enkele inhoud

Box 2

Enkele inhoud, enkele inhoud, enkele inhoud

Enkele inhoud, enkele inhoud, enkele inhoud

Enkele inhoud, enkele inhoud, enkele inhoud

Voorbeeld

.box {
  height: 500px;
}

Probeer het zelf

Maar, door dit te doen, verlies je elasticiteit. Als je kunt garanderen dat er altijd dezelfde hoeveelheid inhoud in de doos zit, is dat oké. Maar vaak is de inhoud verschillend. Als je de voorbeeld probeert op een telefoon, zie je dat de inhoud van de tweede doos wordt weergegeven buiten de doos. Dit is waar CSS3 Flexbox van pas komt - omdat het automatisch kan uitzetten zodat de doos even lang is als de langste doos:

Voorbeeld

Maak een flexbox met Flexbox:

Box 1 - Dit zijn enkele teksten om ervoor te zorgen dat de inhoud echt hoog is. Dit zijn enkele teksten om ervoor te zorgen dat de inhoud echt hoog is. Dit zijn enkele teksten om ervoor te zorgen dat de inhoud echt hoog is. Dit zijn enkele teksten om ervoor te zorgen dat de inhoud echt hoog is. Dit zijn enkele teksten om ervoor te zorgen dat de inhoud echt hoog is.
Box 2 - Mijn hoogte zal volgen van Box 1.

Probeer het zelf

Het enige probleem met Flexbox is dat het niet werkt in Internet Explorer 10 of eerder. U kunt het bekijken in onze CSS Flexbox Leer meer over de Flexbox lay-out module in dit hoofdstuk.

Navigatiemenu

Verplaats float Gebruik het samen met een hyperlink lijst om een horizontale menu te maken:

Voorbeeld

Probeer het zelf

Web-lay-out voorbeeld

Gebruik float Eigenschappen voltooien het hele Web-lay-out is ook gebruikelijk:

Voorbeeld

.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%;
}

Probeer het zelf

Meer voorbeelden

Een afbeelding met rand en marge float naar de rechterkant van een paragraaf
Laat een afbeelding float naar de rechterkant van een paragraaf. Voeg een rand en marge toe aan de afbeelding.
Een afbeelding met een titel float naar de rechterkant
Laat een afbeelding met een titel naar rechts floaten.
Laat de eerste letter van een paragraaf naar links floaten
Laat de eerste letter van een paragraaf naar links floaten en stel de stijl van deze letter in.
Maak een website met het gebruik van float
Maak een homepage met een horizontale navigatielijn, kop, voettekst, linkerkant navigatielijn en hoofdinhoud met het gebruik van float.

Alle CSS floating eigenschappen

Eigenschap Beschrijving
box-sizing Definieer de berekening van de breedte en hoogte van een element: of deze inclusief de binnenafstand en randen moeten zijn.
clear Specify which elements can float next to the cleared element and on which side.
float Specify how an element should float.
overflow Specify what will happen if the content overflows the element box.
overflow-x Specify how the left/right edges of the content area should be handled when the overflow content area is specified.
overflow-y Specify how the top/bottom edges of the content area should be handled when the overflow content area is specified.