NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Float og clear i CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

Denne lektion skal handle om, hvordan du med float og clear kan få elementer til at ligge sig ved siden af og omkring hindanden.

Øvelser:
1 - Få 4 forskellige divs i samme størrelse til at ligge horisontalt ved siden af hinanden ved hjælp af float. Der skal være lidt mellemrum mellem billederne.
2 - Lav en tekstblok under disse divs som ikke skal være påvirket af at de anvender "float".

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS, float og clear

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 14</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        
        <img src="pow.jpg" alt="billede" class="float" />
        
        <p> tekst tekst tekst tekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            
        </p>
        
        <p class="clear"> tekst tekst tekst tekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            tekst tekst tekst tekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            tekst tekst teksttekst tekst teksttekst tekst tekst
            
        </p>
        <div class="div1"></div>
        <div class="div2 float"></div>


    </body>
</html>    
        

Her har du kildekoden

/* CSS filen */
.float {
    float: right;
    margin: 10px;
}

p {
   font-size: 20px; 
}

p.clear {
   clear: both;
}

.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.div2 {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!

Forum stats

  • 1086 Antal brugere
  • 1566 Antal emner
  • 7881 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside