2 changed files with 53 additions and 0 deletions
+ 20
- 0
02-floats/float.html
View File
| @@ -0,0 +1,20 @@ | |||
| <!doctype HTML> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>HTML/CSS - 001: Opdrachts</title> | |||
| <link rel="stylesheet" href="floats.css";> | |||
| </head> | |||
| <body> | |||
| <div class="div container"> | |||
| <div class="div-1"></div> | |||
| <div class="div-2"></div> | |||
| <div class="div-3"></div> | |||
| <div class="div-1"></div> | |||
| <div class="div-2"></div> | |||
| <div class="div-3"></div> | |||
| <div class="clear"></div> | |||
| </div> | |||
| </body> | |||
| </html> | |||
+ 33
- 0
02-floats/floats.css
View File
| @@ -0,0 +1,33 @@ | |||
| .div-1 { | |||
| border: 3px solid orchid; | |||
| } | |||
| .div-2 { | |||
| border: 3px solid indianred; | |||
| } | |||
| .div-3 { | |||
| border: 3px solid royalblue; | |||
| } | |||
| .div-1, .div-2, .div-3 { | |||
| width: 25%; | |||
| height: 50px; | |||
| box-sizing: border-box; | |||
| float: left; | |||
| } | |||
| .clear { | |||
| clear: both; | |||
| } | |||
| .container { | |||
| background-color: yellow; | |||
| width: 60%; | |||
| margin: 0 auto; | |||
| } | |||
Loading…