2 changed files with 59 additions and 0 deletions
+ 32
- 0
02-floats/floats.css
View File
| @@ -0,0 +1,32 @@ | |||
| .div-1,.div-2,.div-3{ | |||
| width: 25%; | |||
| height: 50px; | |||
| box-sizing: border-box; | |||
| float: left; | |||
| } | |||
| .div-1{ | |||
| border: 3px solid orchid; | |||
| height: 55px; | |||
| } | |||
| .div-2{ | |||
| border: 3px solid aquamarine; | |||
| } | |||
| .div-3{ | |||
| border: 3px solid indianred; | |||
| } | |||
| .clear{ | |||
| clear:both; | |||
| } | |||
| .container{ | |||
| background-color: lightblue; | |||
| width: 60%; | |||
| margin: 0 auto; | |||
| } | |||
+ 27
- 0
02-floats/floats.html
View File
| @@ -0,0 +1,27 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Positioning</title> | |||
| <link rel="stylesheet" href="floats.css"> | |||
| </head> | |||
| <body> | |||
| <div class="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> | |||
Loading…