| <!DOCTYPE html> |
| <head> |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <style> |
| .container { |
| position: relative; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| border: 1px solid black; |
| padding: 0; |
| background-color: buttonface; |
| float: left; |
| margin: 2px; |
| } |
| |
| .margin { |
| margin: 5px 10px 5px 5px; |
| } |
| .sized { |
| width: 50px; |
| height: 50px; |
| } |
| .pink { |
| background-color: pink; |
| } |
| .float { |
| float: left; |
| } |
| .line { |
| height: 2px; |
| border-top: solid 1px #fff; |
| background: #00f; |
| |
| position: absolute; |
| width: 50px; |
| bottom: 5px; |
| left: 5px; |
| } |
| </style> |
| </head> |
| <body> |
| You should see an almost-square grey rectangle containing a pink square with a blue line below it. |
| There should be no pink below the blue line. |
| <hr> |
| <div class="container flexbox"> |
| <div> |
| <div class="margin sized float"> |
| <div class="sized"> |
| <div class="sized pink"> |
| <div class="line"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
