| <!DOCTYPE html> | |
| <html> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| .horizontal-box { | |
| display: flex; | |
| } | |
| .horizontal-box div { | |
| height: 30px; | |
| border: 0; | |
| margin-bottom: 10px; | |
| flex: 1; | |
| } | |
| .first { | |
| background-color: #0f0; | |
| } | |
| .second { | |
| background-color: #0d0; | |
| } | |
| .third { | |
| background-color: #090; | |
| } | |
| .fourth { | |
| background-color: #060; | |
| } | |
| .fifth { | |
| background-color: #030; | |
| } | |
| </style> | |
| <body> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div class="horizontal-box"> | |
| <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div> | |
| </div> | |
| <div style="position:absolute; left: -10000px;">You should see identical green bars going from light green | |
| (left) to dark green (right).</div> | |
| </body> | |
| </html> |