Simondb
4 years ago
2 changed files with 62 additions and 0 deletions
+ 27
- 0
02-floats/float.html
View File
| @@ -0,0 +1,27 @@ | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title> | |||
| hi | |||
| </title> | |||
| <link rel="stylesheet" href="floatstyle.css" /> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
| <div class="div-1"></div> | |||
| <div class="div-text"> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia | |||
| suscipit corporis minima ex excepturi dolorem nemo delectus nihil, | |||
| molestias veniam quisquam ducimus aliquid fugiat fugit omnis magni | |||
| perspiciatis cupiditate. Fugit! | |||
| </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> | |||
+ 35
- 0
02-floats/floatstyle.css
View File
| @@ -0,0 +1,35 @@ | |||
| .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; | |||
| } | |||
| .div-text{ | |||
| display: none; | |||
| width: 100%; | |||
| height: auto; | |||
| } | |||
| .container{ | |||
| background-color: lightblue; | |||
| width: 60%; | |||
| margin: 0 auto; | |||
| } | |||
| .clear{ | |||
| clear: both; | |||
| } | |||
Loading…