| <!DOCTYPE html> |
| <style> |
| .egg { background:yellow; } |
| .egg::before { content:"egg"; } |
| .sausage { background:brown; } |
| .sausage::before { content:"sausage"; } |
| .spam { background:hotpink; } |
| .spam::before { content:"spam"; } |
| .lobster { background:salmon; } |
| .lobster::before { content:"lobster"; } |
| </style> |
| <p>Below there should be 4 rows of boxes. The boxes on each row should have the same color. |
| Some boxes are expected to be wider than others.</p> |
| <div style="-webkit-columns:3; -webkit-column-gap:10px; width:620px; height:120px; line-height:30px; column-fill:auto;"> |
| <div class="egg"></div> |
| <div style="-webkit-columns:2; -webkit-column-gap:10px;"> |
| <div class="sausage"></div> |
| <div class="sausage"></div> |
| <div style="-webkit-column-span:all;" class="spam"></div> |
| <div class="lobster"></div> |
| <div class="lobster"></div> |
| <div class="egg"></div> |
| <div class="sausage"></div> |
| <div class="spam"></div> |
| <div class="lobster"></div> |
| <div class="egg"></div> |
| <div class="sausage"></div> |
| <div class="spam"></div> |
| <div class="lobster"></div> |
| <div class="egg"></div> |
| <div class="sausage"></div> |
| <div class="spam"></div> |
| <div class="egg"></div> |
| <div class="sausage"></div> |
| <div class="spam"></div> |
| </div> |
| <div class="lobster"></div> |
| </div> |
