CSS layout - flydende eksempel

Denne side præsenterer almindelige flytteeksempler.

Gitter / Rammer med samme bredde

Box 1
Box 2
Box 1
Box 2
Box 3

Ved at bruge float Egenskaben kan nemt bruges til at flytte indhold parallelt i rammer:

Eksempel

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Tre rammer (fire rammer bruger 25%, to rammer bruger 50% osv.) */
  padding: 50px; /* Hvis der skal tilføjes afstand mellem billeder */
}

Prøv det selv

Hvad er box-sizing?

Du kan nemt oprette tre parallelle flydende rammer. Men når du tilføjer indhold for at udvide bredden af hver ramme (f.eks. indrykning eller kantlinjer), ødelægges rammen. box-sizing Egenskaben tillader os at inkludere indrykning og kantlinjer i den samlede bredde (og højde) af rammen, hvilket sikrer, at indrykningen forbliver inden for rammen og ikke sprækker.

Du kan finde flere oplysninger på vores CSS Box Sizing I dette kapitel lærer du mere om box-sizing-egenskaben.

Billeder parallelt

Denne rammegrid (The grid of boxes) kan også bruges til at vise billeder parallelt:

Eksempel

.img-container {
  float: left;
  width: 33.33%; /* Tre rammer (fire rammer bruger 25%, to rammer bruger 50% osv.) */
  padding: 5px; /* Hvis der skal tilføjes afstand mellem billeder */
}

Prøv det selv

Rammer med samme bredde

I dette eksempel lærte du, hvordan du kan flytte ramer parallelt med samme bredde. Men at skabe rammer med samme højde er ikke nemt. Men en hurtig løsning er at sætte en fast højde, som vist i eksemplet nedenfor:

Box 1

Nogle indhold, nogle indhold, nogle indhold

Box 2

Nogle indhold, nogle indhold, nogle indhold

Nogle indhold, nogle indhold, nogle indhold

Nogle indhold, nogle indhold, nogle indhold

Eksempel

.box {
  height: 500px;
}

Prøv det selv

Men ved at gøre det mister man fleksibilitet. Det er kun godt, hvis man kan garantere, at der altid er det samme antal indhold i rammen. Men ofte er indholdet forskelligt. Hvis du prøver eksemplet på mobiltelefonen, vil du se, at andet indhold vises uden for rammen. Dette er, hvor CSS3 Flexbox kommer ind - fordi den kan automatisk strække rammen, så den er lige så lang som den længste ramme:

Eksempel

Opret en fleksibel ramme med Flexbox:

Box 1 - Her er nogle tekster, for at sikre, at indholdet virkelig er meget højt. Her er nogle tekster, for at sikre, at indholdet virkelig er meget højt. Her er nogle tekster, for at sikre, at indholdet virkelig er meget højt. Her er nogle tekster, for at sikre, at indholdet virkelig er meget højt. Her er nogle tekster, for at sikre, at indholdet virkelig er meget højt.
Box 2 - Min højde vil følge ramme 1.

Prøv det selv

Den eneste problem med Flexbox er, at den ikke virker i Internet Explorer 10 eller tidligere versioner. Du kan finde mere information i vores CSS Flexbox Lær mere om Flexbox layout modulet i kapitlet.

Navigationsmenu

Placer float Brug sammen med hyperlinks liste til at oprette en horisontal menu:

Eksempel

Prøv det selv

Web layout eksempel

Brug float Egenskaber kan også bruges til at fuldføre hele Web-layout:

Eksempel

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

Prøv det selv

Flere eksempler

Billede med kant og margin flyder til afsnittets højre side
Lad et billede flyde til afsnittets højre side. Tilføj kant og margin til billedet.
Billede med titel flyder til højre
Lad et billede med titel flyde til højre.
Lad afsnittets første bogstav flyde til venstre
Lad afsnittets første bogstav flyde til venstre og sæt stilen for dette bogstav.
Opret en hjemmeside med flydende
Brug af flydende til at oprette en startside med horisontal navigationslinje, sidehoved, sidestip, venstre navigationslinje og hovedindhold.

Alle CSS-flydende egenskaber

Egenskab Beskrivelse
box-sizing Definiering af beregningsmetoden for elementets bredde og højde: om de skal inkludere indrykning og kant.
clear Specificer hvilke elementer, der kan flyde ved siden af et element, der skal fjerne flydende, og på hvilken side.
float Specificer hvordan et element skal flyde.
overflow Specificer hvad der vil ske, hvis indholdet strækker sig ud over elementets ramme.
overflow-x Specificer hvordan indholdets venstre/højre kant skal håndteres, når indholdet i et overflødigt element skal håndteres.
overflow-y Specificer hvordan indholdets øvre/nederste kant skal håndteres, når indholdet i et overflødigt element skal håndteres.