| <!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> |
