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:
<!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="Lektion14.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>
.float {
float: right;
}
p {
font-size: 26px;
}
p.clear {
clear: both;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
}
Vær den første til at skrive en kommentar!
